کتاب اجاکس الجزء الاول 


اقدم لك عزيزي القارئ اول كتاب عربي يتحدث عن تقنية اجاكس اسال الله ان ينفع به امة الاسلام 
اللهم علمنا ما ينفعنا و انفعنا ا علمتنا و زدنا علما انك انت العليم الحكيم 


اخوکم امن کزة 


سنبداً من تحت الصفر و نصل بك الى مبرمج اجاكس محترف مشيئة الله لا اريد منك الا ان تعرف 
القليل عن لغة ۳1٧N[‏ لاني ساشرح لك ما يلزمك من لغات ستلزمنا اثناء تطبيقات الاجاكس 
(XML,CSS,PHP,javaScr1pt )Jia‏ 


اذا اتعلم اجاکس؟ 

هناك عشرات المزايا الرائعة التي توفرها تقنية اجاكس ساكتفي بذكر مثال بسيط اذهب الان الى غوغل 
و اكتب كلمة دروس ستجد ان غوغل يحاول ان يحزر اذا كنت تبحث عنة دروس قي الفوتوشوب و 
هذا ما يسمى الاكمال التلقاني 


ما البرامج التي احتاجها؟ 


اروع برنامج هو الادوي دریم ويفر بامكانك ان تطلبه من اي محل لبيع الدي ٤‏ دي او تحميله من 
النت الان بعد ان نصبت البرنامج اختر من القانمة فايل لامر File>new> HTML gı‏ 


New Document 


Layout: 


Pagê Type: 

RET ETE i. gE EEE 
1 e ege SS | 8 HTML template ۰ 1 colurin elastic, centered 
N o ج‎ a ا و‎ 

Blank Template î #SLT {Entire page) ۰ | 1 column fixed, centered‏ و 
#SLT (Fragment) | , 1 column fixed, centered,‏ "=| 

ws ActionScript | 1 column liquid, centered 

Mm css | | 1 column liquid, centered, 
کوپو کس‎ cript | 2ã column elastic, left sideb 
E, MAL , | 2 column elastic, left sideb 


| 2 column elastic, right side 
| 2ã column elastic, right side 
1 ã column fixed, left sideba 
و‎ 2ã column fixed, left sideba 
ASP.NET C# ٠ | 2ã colurnn fixed, right sideb 
ASP.NET Y6 لاہ یقت انظ سه لی د اا‎ 


ASP JavaScript 


وبعد ان اخترت اتش ن ام ال بفتح لك صفحة فىها کود جاهز كالصورة التالية 


IEE EL ELD EE Title: lM. &, 

5 1  <IDOCTYPE html PUBLIC "-#FW3C/ DTD #HTML 1.0 Transitiona 
FAEEET A FF WN. WE OE TRI EOENL LI DOTD? ERENLTI=ETARELEIORAL.AEA 

a <html #mlne="httEp: f ww. w3. orq# 194Q9f#html "2 

2 3 head? 

٤ 4 <meta http-equlv="Contsnt-Type" content="text# html: char 

1 5 <tI1tle>Untitled Document<ftitle> 

û f head> 

SG tbody > 

1i} 1 4F body> 

d c<ihtml> 

| 11 


الفصل الاول جافا سكريبت 


هيا لننطلق مع اللغة اللذيذة جافا سكريبت 


<html> 

<head> 

<script type="text/j avascript"> 
alert("Hi "); 

</script> 

<title>My first script </title> 
</head> 

<body> 

<h1> Ayman for php</hN1> 
</ bodyY> 

</html> 


و عند تشغيلك لهذا الكود يجب ان يعطى النتيجة التالية: 


hittp:fflacalhastflernfajaxftest. html - Windows Internet Explorer - ×‏ چ 


E 7 Bi mtodocahoslemauv [+ x eset |0 


a = : + 
E AF | O http:fNacahostflermfajaxfte... rh ” لگ‎ i ” zr Page ” TF Tools < 


Windows Internet Explorer × 


[gl €Û Internet F100 r 


فقط السطر الغامق هو بلغة الجافا اما البقية فهي لغة الاتش تي ام ال اي فقط هذا السطر 


alert("Hi "); 


و لا حظ ايضا الفاصلة المنقوطة التي يجب ان تضعها ف نهاية كل سطر () تعود ان تضع السيمي 
كولن لانك ان نسیتها بسکربت بي اتش بي سيفشل البرنامج كليا 


عا او التفف مك داط و حت عن ت حه ال ارات فط عه ئ اعفط راف 


هناك العديد من الكائنات الجاهزة في لغة الجافا سكريبت و لهذه الكائنات خواص و عليك ان تستدعى 
الخاصية و تعبىئ قيمة بداخلها . 


فمثلا الكائن اذا اردت ان تطبع جملة استخدم الكائن 11€۸ 0٥C1‏ 
ثم استدعي الخاصية ()write‏ 


ثم ضع القيمة التي تريدها 
document.write("I love java");‏ 


سهل جدا اليس كذلك؟ طيب لناخذ مثالا اخرلنفرض انك تريد فتح نافذة جديدة لتكن غوغل متلا و 
حدد كلمة البحث الا يبدو ذلك ممتعا؟ 


<script type="text/j avascript"> 
window.open("http:/ / google.com/ search? 
q=islam","any_ name",""); 

</script> 


هذا الكود سیفتح نافذة جدبدة و باخذه الى غوغل و يبحث عن كلمة اسلام کل هذا دون علم 


d0cument. tit‏ لتغیر عنوان الصفحة 

orاgco d0cument.‏ لتغير خلفية الصفحة 

1[cation.hostinam‫€‏ استخدمها لتعرف اسم شركة مزود الخدمة 
سم شركة مز 


navigator .appم Name‏ مفيدة جدا لتحديد نوع امتصفح الذي يستخدمه الزائر 


۰۵% 


احيانا انت كمبرمج تضطر الى كتابة تعليقات تساعدك على تذكر الية عمل البرنامج او اي شين اخر تريد 
کتابته لكنه سيفسد الكود ان م تستخدم (//) او (/*التعليق* /) 


<html> 

<head> 

<script type="text/j avascript"> 
// That was in 1/1/2010 
alert("! love java"); 

1 

comment 

annother comment 

Hi .... 

7 

</script> 

<title>J) avaSCript</title> 
</head> 

<body> 

<h1>Ayman for php </hN1> 
</ body> 

</html> 


كما ترى فيمكنك ان تضع ما مئات الاسطر من التعليقات اذا استخدمت (/*عشرات لاسطر من 
التعليقات*/) 


اما الدوبل سلاش فهي لتعليق سطر واحد / / فهذه الجمل لن تظهر ابدا لانها مجرد تعليقات 


» 1 ۰ | : خارجي 


احیانا تضع برنامج بحیث تستخدم ملف اسمه سکریبت1 اذا کان متصفح الزائر انترنت اكسبلور مثلا 
اما اذا كان متصفحه فايرفوكس فانك تريد استخدام الملف سكريبت2 على سبيل الممثال 


;( "نص من ملف خۈارجي" document. Wrİ@(‏ 


احفظ السطر السابق باسم S[.أC۲1°SC‏ 


ثم قم تد ر الف باستخدام خاصدة SIC‏ 


<html> 

<head> 

<script type="text/j avascript" src="script.js"> 
</script> 

>i] < برنامجي الاوں‎ >/ tite < 

</head> 

<body> 

</ body> 

</html> 


احفظ الكود السابق باي اسم تريد مثلا 1١٣اط.1یAja‏ 


بامكان الجافا ان تكشف نوع المتصفح الذي يستخمده الزائر و ذلك باستخدام الاوبجكت 
Navigator‏ و هذا الاوبجکت له خواص فمٹلا : 


معرفة اسم المتصفح navigator.apþpNaA1^€‏ 
معرفة رقم اصدار او الفيرجن V€18101۸ضضnavigator.a‏ 
هذه الخاصية تعطيك تفاصيل اخر١ى navigatOr.US€rAg£€ 1t‏ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

</head> 

<body> 

<script type="text/j avascript"> 

document.write(" < N3> »ي‎ dzia. :" +navigator.appName+"</ h3>"); 
document.write(" <h3> يرڍ‎ مã,‎ :" +navigator.appVersion+"</ h3>"); 
document.write(" <h3>u,oui: :" +navigator.userAgent+"</ h3>"); 
</script> 

</ bodyY> 

</html> 


لاحظ اشارة الزائد (+) ضرورية للجمع بين متغير و نص الان لنرى كيف سيعرض الفايرفوكس هذه 
الصفحة 


l5 Help 


localhostflernfajaxftest, heral "| IGlz 


ws Marketplace | j Windows Media | j Windorys 
Netscape: متصفحڭ ضر‎ 
(windows; eı-U0$S) 5.0: رقم الاصدار‎ 


la'5.0 (Windows; U; Windows NT 5.1; en-US; Iv:1.8.1) Gecko/20060913 Firefox/2.0: تفاضصيل‎ 


بينما اذا جربت الانترنت الاکسبلورر سيعر ضها ھکذا 


2 JavaSCript - Windows Internet Explorer CEK 
E | http: flocalhastflernfajaxftest, htrnl ج لر اا ي‎ 

Fila Edit View Favorites Tools Help 

TF dr | € Javascript | i ˆ لظ‎ He ” Fy Page ~ CF Tools > 


Microsoft Internet Explorer: jè dmخفصتم‎ 
(compatible; MSIE 7.0; Windows NT 5.1; InfoPatl.2) 4.0: رقم الاصدار‎ 


(Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; InfoPath.2: ليٺlفٿ‎ 


(Eve 1 ځئS)(‌ڻٺادحالا‎ 


عندما يضغط المستخدم على زر نسمي هذا حدث او عندما هر باماوس فوق صورة ذلك حدث اخر 
عندما يغلق النافذة ذلك حدث ايضا و هذا جدول باهم الاحداث التي ستلزمك بالاجاكس 


حدث ان يقوم امستخدم بالغاء شيء ما 

عنما يغير المستخدم خيارا (بقانمة منسدلة مثلا) 

ضغط واحدة يتحقق هذا الحدث 

عندما يسحب المستخدم عنصرا و يلقيه(السحب و الالقاء) 


onerror‏ عندما يكون هناك خطا برمجي بالجافا سکریت 


onfocus 


عزنل وضع مؤشر اناوس ضمن حقل استعدادا للكتارة 


onkeydown‏ عندما يضغط الممستخدم مفتاح لاسفل 


onkeypress‏ عندما يضغط اممستخدم مفتاح 


onload 


onmousedown‏ عندما يصبح مؤشر الماوس اسفل العنصر 


ONnMmMOUuSeout 


عندما يبتعد مؤشر الماوس بعيدا عن العنصر 


onmouseover‏ فما تن هر لاوس تون الح اة 


OnmMOuseup‏ عندما يحرر المستخدم زر الماوس 
onreset‏ عند تصفير الخانات 


onres1ize 


عند تعیر المستخدم لحجم الصفحة او حجم عنصر 


onsubmit 


عندما يضغط اممستخدم على زر ساميت 


onunload‏ عند اغلاق نافذة المتصفح 


OME 


عندما نطبق مثال عملي ستكتشف ان الاحداث مسلية و سهلة حيث مكنك ان تضع اي كود جافا 
سکریبت بدون ان تحصره بین <أ۲1٤8>‏ و < SC۲1pt/‏ > کما تعلمنا سابقا لاحظ هذا الممثال 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>J) avaSCript</title> 

</ head> 

<body onClick="document.bgColor='red'" 
onDbIClick="document.bhgColor='blue' " 
onMouseOut="document.bgColor='yellow'" > 

اضغط مرة واحدة يتغير لون الصفحة الى الاحمر و دبل كليك يصبح ازرق و عند ابتعاد الماوس عن الصفحة تصبح الخلفية <3> 
a >3<‏ 

</ body> 

</html> 


و فا آله اا مر لرن الفف ال اا مد ا ع و آل افر 
بابتعاد المماوس عنها 


Hk 1 10 f 
Fils Edit Yiewy History Bookmarks Tools Help 


httpifflacalhastflernfajaxftest, html‏ | 8 ج ك 


lÎ customize Links |j Free Hotmail | j Windows Marketplace |j Windows Media | j Windows 


|j Untitled Document |_| Ja¥raSLript * 


تحذير لقد استخدمنا علامتي التنصيص المفردة (' ) 
صح > <body onClick="document.bgColor='red'"‏ 


ولك ااك ان ضعا هكا 


<body onClick="document.bgColor="red"" > خطاً‎ 


اما اذا کنت تستخدمها بین عنصر سکریبت <)8°۲1> و < >8٤٥11/‏ فیجوز عندها استخدام 
العلامة المزدوجة (" ") 


<script type="text/j avascript"> 
document. bgColor="red"; 
</script> 


(FunCct101) JiJ 


عند تنفيذك لکود دون ان تضعه داخل فنکشن سیتم تنفیذه فورا ولکن ماذا لو اردت ان ينفذ الكود 
فقط عندما تريد انت و ليس مجرد تحميل الصفحة ولحل هذه اممشكلة نخزن الكود داخل فنكشن وثم 


نستدعيه عندما نرغب يذلك. 


<html dir="rtl"> 

<head> 

<meta http- equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function hi() 


و( "'مرحبا بك فی موقعنا e٣)"‏ اص 
} 

</script> 

</ head> 

<body> 

</ bodyY> 

</html> 


غاية في السهولة کتبنا كلمة ۴11۸٥101٩‏ 
ثم اسمینا هذه الفنکشن بالاسم هاي 1 


و اضفنا قوسین فاصبحت هكذا () 
و ثم احصر كودك بين الاقواس المجعدة ان صح التعبير إضع الكود هنا 


ولكن لن يعمل الكود احزر طاذا يا شاطر؟ لاننا م نستدعي الفنكشن بعد . 
استدعاء الفنكشن سهل جدا فقط اكتب اسم الفنكشن متبوعا بقوسين لكني اريد استدعاءها فقط عندما 


مر مؤشر الماوس فوق فقرة معينة 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>J) avaSCript</title> 

<script type="text/j avascript"> 

function hi() 


و( "'مرحبا بك في موقینا "")٣e‌اج‏ 

} 

</script> 

</ head> 

<body> 

< م /ک< عند مرور الماوس فوق هذه الجملة ستظهر رlwة‏ > <p onMouseOver=" hi()'""‏ 
bodyY>‏ /< 

</ htm|I> 


فعندما نجربه بالفايرفوكس و تمر بالماوس فوق الفقرة تظهر لك رسالة ترحيب 


3 JayaSCript - Mozilla Firefox - × 
Fils Edt Yijaw History Bookmarks Tools Help 


+ & 8 [I Bttp:fflocalhastlernajaxftest html | | Elz” 8 | 


Bb Lustomize Links B Free Hotmail Bb Windows Marketplace Bb Windows Media Bb Yindoms 


عند مروز الماوس فرق شذه الجملة سنظهر رسالة 


The page al hittp:#localhast says: 


Dong 


و هذا مثال اخر لاحظ انني استخدم الاحداث فعند خروج المستخدم من موقعك تظهر له رسالتي وداع 
الا يبدو هذا مسلا 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 
function good bye() 

{ 

alert(" .ىك‎ aJ"); 

;(" مع الف .ا.alert("i‏ 

} 

</script> 

</head> 

<body onUnload="good bye()"> 
</ body> 

</html> 


او بامكانك ان تنفذ الكود هجرد تحميل الصفحة و ذلك باستخدام الحدث 01108 كما يلي 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function text( ) 

{ 

document.write(" <h1> <cent€r> le liai الهم علمنا ما ينفعنا و‎ 
ine </ center> </ h1>"); 

} 

</script> 

</head> 

<body onload="text()'"' > 

</ body> 

</html> 


لغرى كيف سيعرضها المتصفح : 


. î Mozilla Firefox 
File Edit Yiew History Bookmarks Tools Help 


2 ي‎ 3 3 Http: Hlaocalhostflernfajaxftest, html DB | El jsooe  &] 


B5 Lustomize Links | j Free Hotmail | j Windows Marketplace | j Windows Media | j Windows 


اللهم علمنا ما ينفعنا و انفعنا بما علمتنا 


ولكن ماذا عن محتويات الصفحة او جسم الصفحة بودي اذا كتبنا كلاما بالقسم 00Q¥‏ للاسف لن 
يظهر لانك عندما تستخدم الكائن ۲1€ 1۸†.W‏ ع١11٥0‏ يقوم مسح كل محتويات الصفحة ثم 
يكتب فوقها لان هذا الكائن بلغة الجافا هثل صفحة الويب . 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function text( ) 

{ 

document.write(" <h1> <cent€r> Le lisiil اللهم علمنا ما ينفعنا و‎ 
line </ center> </ h1>"); 

1 

</script> 

</head> 

<body onload="text()'" > 

<۸3/> للاسف هذا النص لن يظهر <3> 

<۸3/>بعبارة اخرى كل الصفحة لن تظهر <3> 

<۸3/>الذي سيظهر فقط الجملة التي كتبت بالجافا سكريبت<3> 

</ bodQdyY> 

</html> 


rC http:#Hlocalhostfler nfajaxftest.html - Windows Internet Explorer - × 


G&G: N” #@ | http: flocalhostflernfajaxftest, html اا آي‎ [Live searh Jj جا لر‎ 


FF‏ ا کک E‏ أ ڪڪ 
E E Javascript E untitled... @Efhttp... ZX Fî 7” Bl em 7” r Page r” CF Tools‏ # 


اللهم علمنا ما ينفعنا و انفعنا بما علمتنا 


lm Û Internet R100 < 


ب افر سوا ل لاه ا وه 


اعتقد انك سمعت بالعنصر <17( >ف لغة ال NL‏ 11[ استعمالھا سھل جدا فهی شبيه <> 
ولكن ما الفرق بينها و بين الفقرة <> الان لدينا ثلاث فقرات نريد ان نضع اطار لها باستخدام 
الستابل راقب الكود : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>J) avaSCript</title> 

<style type="text/css"> 

.bord 

{ 

border:double 3px; 

padding-right: 20px; 

} 


</style> 

</ head> 

<body> 

<p class=" Ord" >vر <ص / < رضنا لله‎ 

<p class=" bord" >iıo eاuاl و‎ </ p> 
<p class=" bOrd" >yguر <ص / کو محمد نا و‎ 
</ bodQdyY> 

</html> 


ولكن ظهرت بشكل غير ملائم انظر الى الصورة : 


JavaSCript - Mozilla Firefox 
Fils Edit View History Bookmarks Tools Help 


+ ي‎ 0 || http: flacalhastflernfajaxftest, htrnl "| Gl 


| Lustomize Links |j Free Hotmail |j Windows Marketplace |j Windows Media |j Windows 


و انت كنت تريد ان يكون ممجموعة الفقرات اطار واحد الحل الوحيد هو باستخدام ال 417 الان 
جرب هذا الكود بنفسك بعد استخدام divJı‏ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>J) avaSCript</title> 

<style type="text/css"> 

.bord 


{ 

border: double 3px; 
padding-right: 20px; 
1 


</style> 

</ head> 

<body> 

<div class="bord"> 
>8 م /> رضینا بالله ربا<‎ < 

< م /> و بلاسلام دیا <۴> 

< م /> و محمد نبیا و رسولا >٥<‏ 
div>‏ /< 

</ body> 

</html> 


. 3 JavaSCript - Mozilla Firefox 
File Edt view History Bookmarks Tools Help 


r € 8 | Http: Hlocalhastflernfajaxftest, hErnl | l= 


|j Lustomize Links |j Free Hotmail j Windows Marketplace j] Windows Media | j Windows 


هل لاحظت الفرق ؟ و الان ركز على خاصية مهمة تمعن في هذا الكود 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
</head> 

<body onload="text()"> 

<div id="first"></div> 

<div id="secondString" > </ div> 

</ body> 

</html> 


فكما ترى هذا العنصر <1۷(> ياخذ الخاصية 10 حيث مكنك ان تعباً لكل <17( > خاصية 


1 1٣8€ فمثلا فی ال <1۷( >الاولی وضعنا لھا ال‎ 
<div id="first">< /div> 
<div id="secondString">< / div> 


انا اركز على خاصية ال (1 لانها ستلزمنا كثرا . 


نحن تعودنا استخدام الكائن 0٥111١2681‏ حيث هثل هذا الكائن صفحة الويب بأكملها و لكن ما 
رايك ان ننشاً كائن خاص لكل 1۷ فهذا يعطيك تحكما اكبر و مرونة بالبرنامج فمثلا ال1۷ الاولى 


<div id="first">< / div> ll ننشا کائن خاص‎ 
<div id="secondStFi1g" >< / d¡17> خıنlll وکائن خاص‎ 


ولكن كيف ننشاء الكائن الخاص نحن تعودنا استخدام الخاصية ۴1٤€‏ لكن هناك خاصية تساعدنا 
على تخصيص الكائن وهي e11€1۸1†8۷1dع[£‏ €1 فعندما تکتب 


document.getElementByld(fiirsr’') 
<div id="fifsئ">‎ _ı فانت بذلك صنعت کائن خاص‎ 


JavaScript object corresponding to the <diİV> :jئlكJI‎ lia و‎ 


يسمونه بالانکليزي 
اي كائن مقابل لتلك ال1 


innerHTML i_ںlخiJı‎ 


ان جد ان ضحت کائن غاص د 01¥ تريد إن تسل ها ال هذه ال01 او اة آغری رید ان 
تكتب نصا داخل هذه ال1۷ هناك خاصية مفيدة و مساعدة جدا وهی inner HTML‏ حيث 
تقوم الجافا سكربت بارسال القيمة التي تخزنها كنص يظهر في تلك ال1۷ فقط اكتب : 


document.getElementBylId("first").innerHTML 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function text( ) 

{ 

document.getElementById( "first" ).innerHTML = "<h1><center> oul 
علمنا ما ینفعنا و انفعنا ما علمتنا‎ > / center> </ hN 1>"; 

} 

</script> 

</head> 

<body onload="text()"> 

<div id="first"></div> 

<div id="secondString"> </ dİV> <3> صنiلl‎ Iاذه سظهر‎ </ ۸3< 

<۸3 />وجميع محتويات الصفحة < ۸3> 

<۸3 / > ن شاء الله <3> 

</ body> 

</html> 


2 JavaSCLript - Windows Inter net Explorer 


ج لر N” @ | http: flocalhostflernfajaxftest, html ¥ FFX [Live searh j‏ ي 


Fil Edt Yim Favorites Tools Help 


2 2 1 : ا 
mh ” Hy Page ” {QF Tools x”‏ لن ” ا Fr r | avaseript‏ 
ت ت ت ے | = = 


اللهم علمنا ما ينفعنا و انفعنا بما علمتنا 


سبظهر هذا التص 
وجس محتوبات الصفحة 
اٿ شاع الله 


Done [al €Û Internet FH 100 r” 


طيب لنجرب هذه المرة ان نصنع كائن اوبجكت خاص بالجملة الثانية و نرسله بالجافا سكريبت و 
ساضع الجملة الثانية اسفل الصفحة لكي تميزها و ساسمي ال1۷ بالاسم 0001١‏ استمتع بالكود : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>J) avaSCript</title> 

<script type="text/j avascript"> 

function text( ) 

{ 

document.getElementBylI d(" bottom").innerHTML = 

center> >/ h 1>";‏ /> سرسل هذا النص بالجافا سكريبت الى اسفل الدصفحة h1> >C٥°C€ ۸€ ٣<‏ >" 

} 

</script> 

</head> 

<body onload="text()" > 

<div id="first"> </div> 

<div id="secondString"> </div> 

<۸1 />محتويات الصفحة <1> 

<br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br> 


<div id="bottom"></ div> 


</ body> 
</html> 


كما ترى ظهرت الجملة سنرسل هذا النص بالجافا سكريبت الى اسفل الصفحة و ظهورها م مسح 
محتويات الصفحة كما حصل معنا عنما استخدlin document. Wr1t€‏ التي تسبب مصيبة و 


J JavaSCript - Mozilla Firefox 
Fils Edit View History Bookmarks Tools Help 
@ 8 E http: ff localhostflernfajaxftest, html َِظ أ‎ lz 


| Customize Links |j Free Hotmail |j Windows Marketplace | j Windows Media Û Windows 


سنرسل هذا النص بالجافا سكريبت الى اسفل الصفحة 


af£$UI12©€ 1۸S تمرير معاملات‎ 


تخيل انك تريد انشاء فنكشن مهمتها ايجاد مربع العدد مثلا اذا طلبت منها مربع العشرة تعطيك مئة و 
في كل مرة تريد ان تعرف مربع عدد جديد هذا العدد الجديد او البيانات الممتغيرة التي تدخلها الى 
الفنكشن نسميها ۲111081۱ و في الممثال يتضح المقال : سنصنع فنكشن نسميها 8Q٣‏ ثم رر 
لها المعامل 111103 وطلبنا منها ان تحسب مربع العدد و في كل مرة نستدعي الدالة نضع عدد 
مختلف 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>J) avaSCript</title> 

<script type="text/j avascript"> 

function sqr(num) 


alert(num* num); 

} 

</script> 

</head> 

<body onload="sqr( 10)" > 


</ body> 
</ htmlI> 


J JavaSCript - Mozilla Firefox 
Fils Edit View History Eookmarks Tools Help 


2 7 & 0 0 IB http: localhost lerr ajaxftest , heral 7 i El 4 | 


B5 _ustomize Links 3 Free Hotmail 8 Windows Marketplace B5 Windoms Media EB irndos 


The page al hittp:#flocalhoast says: 


waiting For localhost, 


دعنا نجرب تمرير قيمة اخرى للمعامل و لتكن 8 كم سيكون الجواب يا شاطر؟ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function sqr(num) 


alert(num* num); 

} 

</script> 

</ head> 

<body onload="sqr(8)" > 
</ bodyY> 

</html> 


J JavaSCript - Mozilla Firefox - × 
File Edit Yiew History Bookmarks Tools Help 2 


و 
î 3 Httpifflocalhostflernfajaxftest, htrnl 7 j IEllsooge  &]‏ ق ي + 


8 Lustomize Links 8 Free Hotrmail Bb Windows Marketplace B Wirndomys Media B5 ir days 


YYaiking For localhask,,, | 


الان دعنا نطبق ما تعلمناه ولكن على العبارة: 
document.getElementById("bottom").innerHTML‏ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>J) avaSCript</title> 

<script type="text/j avascript"> 

function show (text) 

{ 

document.getElementBylI d(" bottom").innerHTML=text; 

} 

</script> 

</ head> 

<body onload="show('< N3> Jalal jc ذا النص يعر‎ text </ hn 3> '(" < 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 


<div id="bottom'"></ div> 
</ body> 
</ htmMlI> 


" JavaSCript - Mozilla Firefox 


Fils Edit Vimy History Bookmarks Tools Help 


+ î [J http:fflocalhostflernfajaxfteast html 7 ِظ‎ IEllsooge [&] 


Bb Lustomize Links 3 Free Hotmail Bb Windows Marketplace BE Windows Media | j Windows 


هذا النص يعبر عن المعامل )جم 


الان سامرر نص اخر و ساغير الحدث ساستخدم الحدث اون كليك فلن يظهر النص الا اذا ضغطت 
باماوس على الصفحة جربه بنفسك و استمتع : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function show (text) 

{ 

document.getElementByl d("tob").innerHTML=text; 


} 


</script> 


</head> 

ظهرت هذه الرسالة لانك ضغطت على اي جj- <body onClick="sh OW ('< 2> jn‏ 

< "('<2 "۸ /> الصفحة 

<div id="tob"></div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 


<div id="bottom"></ div> 
</ body> 
</html> 


ı3 JavaSCript - Mozilla Firefox 
File Edit Yim History Eookmarks Tools Help 


5 & 0 ا‎ http: fflocalhastlernfajaxftest, html 5 | Elzleooge  &@] 


f |j Customize Links |j Free Hotmail |j Windows Marketplazce | j Windows Media | j Windows 


ظهرت هذه الرسالة لانك ضغطت على اي جزء من الصفحة 


الفرق بن >dً17<‏ ر >4۸صSك8<>‏ 


العنصر <1۷ > يستخدم لتنسيق عدة فقرات فغالبا ما نستخدمه مع نصوص طويلة و اجزاء كيرة من 
الصفحة اما عندما نتعامل مع سطر واحد عندها يجب استعمال >841١<‏ الان لديك جملة رضينا 
بالله ربا تريد ان تظهر لفظ الجلالة بخط اكبر لنحاول معا : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>J) avaSCript</title> 

</head> 

<body> 

<p> 

<div style="font-size:12pX" >u, </ div> 
<div style="font-size:36pX" > aul </ div> 
<div style="font-size:12pX" >ıuر</‎ div> 
</p> 

</ bodQdy> 

</html> 


. Î JavaSCript - Mozilla Firefox 
Fila Edit Yiew History Eookmarks Tools Help 


1 پا î 3 Http: fflocalhostflernfajaxftest, htrnl 0 Gl”‏ & ا 


| Lustomize Links | j Free Hotmail | j Windows Marketplace BB Windows Media Bb Yindoms 
رضنا‎ 
ف‎ 
نالل‎ 
0 


زیا 


لكنك لا تريد ان تظهر كل كلمة بسطر بل تريدها جملة متلاصقة الكلمات و ياتي العنصر <841> 
ليحل لنا هذه المشكلة لنكتب نفس الكود لكن باستخدام <1۸ 84>: 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<style type="text/css"> 

.bord 

{ 

border: double 3px; 

padding-right: 20px; 

1 


</style> 

</head> 

<body> 

<p> 

<span style="font-size:12pX" >u, </ span> 
<span style="font-size:36pX" > wy </ span> 
<span style="font-size:12pX" >ıuر</‎ span> 
</ p> 

</ body> 

</html> 


J JavaSCript - Mozilla Firefox 


Fils Edt Yijew History Bookmarks Tools Help 


r r & 0 | Pttpiflocalhastflernfajaxftest, html 5 | Elz lsoode  &] 


j Gustomize Links J] Free Hotmail |] Windows Marketplace j Windows Media j Windows 


ناین 
رضيا ۽ لله ربا 


يعني باختصار شدید استخدم <84۸7> اذا کنت ترید ادراج نص في نفس السطر و الان سنطبق 
مثال متقدم يجعلك اكثر احترافية سندرج جزء من اية قرانية ثم نكمل الجزء الاخر بارساله بالجافا 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>J) avaSCript</title> 

<script type="text/j avascript"> 

function show ( ) 

{ 

document.getElementByl d(" qoran").innerHTML = " jill ذا‎ la ;"و‎ 

} 

</script> 

</ head> 

<body onLoad="show()"> 

<br> <br><br><br><br><br><br><br><br><br><br><br><br><br> 
<h1> 

>SPan i4="goran" <> >/ span>‏ اللهم اتنا ف الدنيا حسنة و في الاخرة حسنة 

</ hN1> 

</ body> 

</html> 


@ JavaSCript - Windows Internet Explorer ا ا‎ × | 


a e ” # | http: fflacalhostflernfajaxjftest, html ب‎ e [Live search j] ا‎ 


3 2 َ ا 
TE ar | € Javascript Em 7” HP Page v7 CF Tools‏ 


الهم اتنا في الدنيا حسنة و في الاخرة حسنة و قنا عذاب النار 


lal €Û Internet Fino > 


كما تلاحظ ظهر الناس الذي ارسلناه بالجافا سكريبت ملاصق تماما للنص الاصلي . 


تټمرير اكثر من معامل 


سنصنع فنكشن تقوم بضرب عددين اذا لا بد لنا من ان نمرر لها معاملين الامر غاية قي السهولة ٠‏ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function mult(num1,num2) 


alert(num1* num2); 

} 

</script> 

</ head> 

<body onLoad="mult( 5,7)" > 
</ body> 

</html> 


2 JavaSCript - Windows Internet Explorer EES 


ا e” @ | http:flacalhastflernfajaxftest, herl ve [Lvesearh j]‏ ا 


3 ا 
ar | € avast 1 1 im ” iF Page ” iF Tools‏ ¥ 


|× Windows Internet Explorer 


۵ھ" 


Lg € Internet F100 ” 


فال اغ 


الان سنصنع فنكشن جديدة و نثمرر لها معاملين الاول يعبر عن النص و امعامل الثاني اين سيتوضع هذا 
النص لا تتكاسل من تجربة الكود بنفسك : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

function show (text,div_ name) 


{ 


document.getElementBylIl d( div name).innerHTML=text; 


} 

</script> 

</ head> 

التوقيع: مع تحيات' ) ,"t0p'(" oncاick="s ۸0W‏ "بم الله الرحمن lلرzيم'‏ ( <body onLoad="sNOW‏ 
O tt0 ' ("<‏ ', ' امیرمج امن کزة 

<h2> <center><div id="top"></div> 

</ center></N2> 
<br><br><bþbr><br><br><br><bþbr><br><br><br><br><br> 
<h3><center> 

<div id="bottom"></div> 

<|/ center></ N3> 

</ body> 

</ htmlI> 


£ JavaSCript - Windows Internet Explorer 


¥<  # | http:fflocalhostflernfajaxftest, html ا مه‎ [Lveseah j] جار‎ 


3 . # 
r aj | € Javascript | ا ا‎ fen 7” [2 Page > TF Tools < 


بسم الله الرحمن الرحيم 


التوقيع: مع تحبات المبرمج ايمن كزة 


ll ÊÊ Internet F100 > 


طبعا التوقيع لن يظهر الا اذا ضغطت على الصفحة ولكن الفكرة الرئيسية هنا انك تتحكم ب 
1 - النص من خلال المعامل الاول ×ع€) 
2 - مکان ظهور النص من خلال المعامل d1۷_۸2۸17€‏ 


( "0 ','بسم الله الرحمن الرحيم')W‏ $10 


۵% 


حيث كنك ان تخزن نصا او اي بيانات في متغير لك لا تعيد كتابة ذلك النص في كل مرة فقط تكتب 
:اسم المتغبر و باممتال يتصح المقال 


<html dir="rtl"> 

<head> 

<meta http- equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

و "بسم الله الرحمن الرحيc"‏ = var strİng‏ 

function show() 


{ 
document. getElementBylI d('top').innerHTML=string; 


1 

</script> 

</ head> 

<body onLoad="show()"> 

<h2> <center><div id="top"></div> 
<|/ center></ N2 > 
<br><br><br><br><br><br><br><br><br><br><br><br> 
<h3><center> 

<div id="bottom"></div> 

<|/ center></ N3> 

</ body> 

</html> 


JavaSCript - Windows Internet Explorer‏ ا 


AN EN 7T FE | Pttpifflocalhastlernfajaxftest, html کر ا ا عي‎ [Live Seah j] ر‎ 7 


Fils Edit View Favorites Tools Help 


| 2 5 3 
E FF @Bvascit | E 7 | bh ~ [Page > FF Tools > 
ا 1 ل‎ 


بسم الله الرحمن الرحيم 


i Û Internet Rio >” 


کما رايت فالنص بسم الله الرحمن الرحيم تم تخزینه ف متغیر اسمیناه 8۳11١4‏ الان ساعطيك مثال 
يقويك باممتغيرات و تتقن استخدام المعاملات ٠:‏ 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 

var num1l = 5; 

var num2 = 4; 

var num3 = 10; 

var result = O; 

function sum() 

{ 

result = num1 + num2 + num3; 
document.getElementByl d('top').innerHTML = result; 
} 

</script> 

</head> 


G©® > | httpifllocalhostflernfajaxftest. html ا‎ 


Fils Edit View Favorites Tools Help 


lg @ Irternet 


لاحظ انني اعرف الممتغيرات خارج الفنكشن لانك اذا عرفتها داخل الفنكشن فسيتم تصفيرها اي اعادتها 
الى قيمها الاصلية في كل مرة تستدعي الفنكشن : 


Fil Edit Yj History Bookmarks Tools Help 


شتا ااا جود ر د ا :153 
اما هذا العداد سيتوقف عند : 1 


و سبب فشل العداد الثاني C01۸0 ١2‏ هو اننا عرفناه داخل الفنكشن 


ملاحظة 


af, name = "Ayman'; 
و اريدك ان تلاحظ ان المتخر النصي یجب حصره ضمن‎ 


var number = 15 ; 


اما اذا کان متعر عددي فلا تضع اشارة التنتنصيص مٿثال ٠‏ 


و حتى لو خزنت القيمة 15 ف الممتغير نومبر ثم اردت ان تغيرها الى 20 مثلا مكنك ذلك بكل 
سهولة جرب الكود بنفسك ٠‏ 


2 JavaSCript - Windows Internet Explorer 


1 € 3 T  # | http:flocalhastflernfajaxftest, hirl ا ا‎ [Lvesearh | جا ر‎ 


E ar | O Javascript 1 1 e |3 Page + Tools 


|× Windows Internet Explorer 


54789657 4 


waiting For http: fHlacalhastflernajaxftest,| j] Fl @ Internet F100 >” 


كما ترى غيرنا قيمة المتغير 4 مرات بكل سهولة 


تخزین خ 0۵٥‏ ف متغیر 


هناك الكثير من الكائنات التى مرت معنا مثل الكائن 0٥C110€1‏ و غره سابقا تعلمنا تخزين 
نصوص او ارقام في متغير الان نريد ان نخزن كائن ح001 ف متغير الامر سهل جدا فقط استخدم 
عبارة 16W‏ و بعدها اسم الاوبجت مثلا هناك كائن للتاريخ اسمه 4€( انظر كيف ساخزن هذا 


الكائن في متغير ساسميه ل 
var d = new Date();‏ 
الان ساخزن کائن نصي 5)۲114() في متغیر اسمه ا٥6‏ [00_×ع مثلا استمتع بالکود : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>]) avaSCript</title> 

<script type="text/j avascript"> 
var text object = new String(); 
text_ object = "| love Ajax"; 
alert(text_ object); 

</script> 

</head> 

<body> 

</ bodQdyY> 

</html> 


2 JavaSCript - Windows Internet Explorer 


o a ” # | http: flocalhastflernfajaxftest, html ا اب‎ [Live search] جار‎ 


E 3‏ 2 س 
TF dF | O ıevascript fh ~ Page > FF Tools =‏ 


۳ Windows Internet Explorer 


1 love Ajax ۵4 


waiting For http: flocalhastflernfajaxftest.| i [] FF Unknown Zona FR 100% >” 


XMLHttp Request jili 


انت كرمج اجاكس الكائن الذي يهمك هو الكائن € EM LH tغp Regus‏ حیث یفیدنا هذا 
الكائن كثرا عندما نسحب بيانات من السيرفر سرا (اي بدون تحديث الصفحة) و بالتالي لا يشعر 


XMLFttp Request jئlكl‎ مIدختuا‎ 


الان لانشاء الكائن فقط اكتب مايلي : 


var objact ; 


object = new XMLHttpRequest(); 


var Ayman ; 
Ayman = new XMLHttpRequest(); 


او بامكانك ان تسمیه باي اسم تريد لکن درجت العادة ان کون اسمه ٠:‏ 


var XMLHttpRequestObject; 
XMLHttpRequestObject = new XMLHttpRequest(); 


عبارة گ1 


كان اسمك سيرحب بك و اي اسم اخر لن يتم الترحيب به انا ساضع اسمي ولكن انت لا تنسخ الكود 


٠ بل ضع اسمك‎ 
<html> 
<head> 
<title>Ayman</ title> 
<script language="j avascript"> 
var name = prompt("",""); 
if(name == "ıı" | | name == "ayman" | | name == "Ayman") 


alert(" Welcome"); 


} 


else 
{ 
alert("Sorry"); 


</script> 
</head> 
<body> 
</ bodyY> 
</html> 


. 3 Ayman - Mozilla Firefox 
Fils Edit Yi History Bookmarks Tools Help 


+ E 4 9 | 3 http: fflocalhostflernfajaxftest, htrnl I 7 G7 
lÎ Most Yisiked ۴ Lusktomize Links ۴ Free Hotmail ۴ Windows Marketplace ۳ windows Media ۴ Windonms 


| Î Untitled Darument 2" Ayman 3 


The page al hitp:JHlocalhost says: 


1 Welcome 


Read localhast EET 


الکود یشرح نفسه انا وضعت شرطا اذا کان گا الاسم ان اور 1281 AY‏ او Ayman‏ عندھا 
اظهرت رسالة ترحيب والا else‏ اظهر رسالة سوري . اريدك ان تجرب ولكن باسمك لک تتمرن على 
الكود لان النسخ و اللصق لا يجدي نفعا. 


و يتم ذلك عن طريق العبارة ."2۷1g4)0۲.4 N412۴‏ ولكني اركز الان على 1f‏ الشرطية : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var browser = navigator.appName; 
function check borwser() 


{ 
alert("jj"); 


if (browser == "Microsoft Internet Explorer") 

{ 

document.getElementByl d( "top" ).in ner H1 ML="" ررgلıS| و "انت تستخدم متصفح انت‎ 
if(browser == "Netscape") 

{ 

document.getElementByl d("top" ).innerHT ML=" ii gl يبدو ان متصفحك هو ارف‎ 
E 

} 

} 

</script> 


<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body onload="check_ borwser()" > 

<h3> 

<div id="top"></div> 

</ N3> 

</ body> 

</html> 


خواص النص 


هناك العديد من الخواص الرائعة التي تفيدنا باقتطاع النص او معرفة عدد الحروف. . 


length iıںږlخلl‎ 


تعطيك عدد حروف النص ملا النص اجاكس ستعطيك © لنجرب معا: 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var string = "yڙك|çI";‎ 
alert(string.length); 


</script> 
<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Ayman</title> 
</head> 
<body> 
</ body> 
</html> 
OO Breanne xn | 


TF ahr | O http:Jflocalhastllernajaxltest. hirl س‎ i ” © th ” iF Page x” GF Tools * ا‎ 


(× Windows Internet Explorer 


` A 


Waiting For hEEp: f localhastflernfajaxtest., | MM j Fr مچ‎ Internet F100 > 


indexOf ةãںاغلl‎ 


تبحث عن حرف او كلمة ثم تعطيك مكان ذلك الحرف فمثلا اذا كان اول حرف تعطيك 0 و ثاني 
حرف تعطىی 1 وهکذا : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var mail = "name@yahoo.com"; 
alert(mail.indexOf(" @") +" @\ n" 
+mail.indexOf(".")+" ."); 
</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman</title> 

</head> 

<body> 

</ body> 

</html> 


طلبت منه مكان النقطة (.) و مكان الد(@) فكانت النتيجة : 


hittp:fflocalhostJler nfajaxftest. html - Windows Internet Explorer‏ چ 


GC yJ 7v (#| http:fflocalhostflernfajaxftest, html e [Live search J] اا‎ 


2 . 2 2 2 #* 
Tr afr | O http:flocalhastylern/ajaxftest. htn! Em 7” yr Page 7” GF Tools < 


% Windows Internet Explorer 


Waiting For http: localhostflernfajaxftest.| | J Fr Internet FR 100 r” 


SUDStF iıدږاخلl‎ 


تطلب منك هذه الخاصية موضع الحرف البداية و موضع النهاية ثم تقتطع النص و تقدم نص جديد 
مثلا ترید ان تقتطع اسم صاحب الاهيل لنفرض ٥011‏ .0114۲۵1۸011211 طعا الاسم هنا 
mF‏ راقب هذا الکود : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var mail = prompt("",""); 

var at = mail.indexOf(" @"); 
function check mail( ) 

{ 

و(" ضع اميلك الحقيقي ")ا٣‏ عاج (1-==اه)]؟Î‏ 
else‏ 

{ 

var name=mail.substr(0,at); 
alert(name+" : املا بك‎ "); 

} 

} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body onLoad="check_ mail()" > 
</ bodyY> 

</html> 


hittp:f/localhostllernfajaxltest. html - Windows Internet Explorer 
ت‎ 
X | Explorer User Prompt 


aymankezzelîypahoo. com | 


- DO # 
sm 
| 


Fil Edit Yiew Favorites Tools Help 


۳ TPT E O 
€ | Internet IF 100 * | . 


التكرار 


OF الحاقة‎ 


اذا آرت مغلا ان تكقب الأعداة الفدرة من 1 إلى هة سكون ذلك صها ما .رانك تكود سمل الام * 


hittp:f#localhostlernfajaxltest. html - Windows Internet Explorer 


G8. 3 http: fflocalhostflernfajaxftest, htrnl ا‎ Ek 


Fils Edt View Favorites Tools Help 


1-3-5-7-9-11-13-15-17-19-21 -23 -25 -27 -29 -31 -33 -35 -37 -39 -41 -43 -45 - 
47 - 49 - 51 - 53 - 55 - 57 - 59 - 61 - 63 - 65 - 67 - 69 - 71 - 73 - 75 - 77 - 79 - 81 - 83 - 85 - 87 - 89 - 
91 - 93 - 95 - 97 -99 - 


wh1]¢ iتقاحلا‎ 


و هي تنفذ ما داخل الاقواس المجعدة ل طاما الشرط صحيح و عندما يصبح الشرط خاطنْ تتوقف عن 
التنفيذ و الشرط الذي ساضعه في مثالنا هو ان العدد 1111103 اصغر من عشرة تمعن بالكود جيدا : 


</html> 


٣ ا ا‎ # | http:fflocalhastflernfajaxjftest, html ا‎ [Lveseah j] جا ر‎ 


# # | Eman 3 dh ~ [HF rage ~ fF Tools < 


سبحان الل و الحمد لله 
سبحان الله و الحم لله 
سبحان الل و الحم لله 
سبحان الله و الحمد لل 
سبحان الل و الحمد لله 
سبحان الله و الحم لله 
سبحان الله و الحمد لله 
سبحان الله و الحمد لله 
سبحان الل و الحمد لله 


سبحان الله و الحم لله 


lal) EÛ Internet F100 >” 


المصفوفات 


المصفوفة هي مجموعة من العناصر مكنك ان تخزن بها کل انواع السانات مثلا المتغبرات او القيم او 
الكائنات لناخذ مثال سبط مصفوفة اسماء اصدقائك : 


var friends = new Array ("دمaۍZx'"‎ ," ر ("حسين"" , "عمر"',"ا^~د‎ 


طبعا المصفوفة تبدا من الصفر فعندما تطلب من الجافا سكريبت ان تطبع القيمة صفر من مصفوفة 
الاصدقاء ستعطيك محمد 


سيکون الناتج مد alert(frie¬ds[0|);‏ 
سينٿج اد alert(friends[1]);‏ 
سينتج ر alert(frie¬ds[2]);‏ 
اما اذا اردت عدد عناص المصفوفة استخدم الخاصية 161g‏ فهنا لديك اربع عناص 


alert(friends.le¬gth); 4 كıطعتس‎ 


طباعة عناص المصفوفة 
ويتم ذلك باستخدام الحلقة فور لنشاهد الكود : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

و( "محمد "و "احمد "ر "غمر ",ر ""حiı"‏ ( var friends = new Array‏ 
for(i=0;i<friends.length;i+ +)‏ 

{ 

document.write(friends[i]+"<br>"); 

} 

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body> 

</ bodyY> 

</html> 


LES 


Fil Edit Yiew Favorites Tools Help 


r | @ aman 1 2 3 e + |i” Page + GF Tools >» 5 


@ Internet F100 7 


كما مكنك طباعة عناص المصفوفة باستخدام حاقة W116‏ 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

و( "محمد "و "احمد "و "عمر ",ر "حiı"‏ ( var friends = new Array‏ 
vari =0;‏ 

while(i<friends.length) 

{ 

document.write(friends[i]+"<br>"); 

i++; 

} 

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body> 

</ body> 

</html> 


Fil Edit View Favorites: Tools Help 


# &# aman | ل‎ d~ [rage > Û Teas > 


lL €Û Internet F100 >” 


كما مكنك انشا المصفوفة بطريقة ثانية : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var friends = new Array(4); 
friends[0O0] = "ı.~.."; 


friends[1] = "ı.>ı"; 

friends[2] = "ys"; 

friends[3] = "j.-"; 

vari = O0; 

while(i<friends.length) 

{ 
document.write(friends[i]+"<br>"); 
I++; 

} 

</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ayman</title> 

</head> 

<body> 

</ bodyY> 

</html> 


احيانا يلزمنا ان نعرف رقم العنصر في المصفوفة طبعا كما تعلم العنصر الاول رقمه 0 و الثاني 1 و 
الثالث رقمه 2 الان لنبحث عن رقم العنصر عمر في المصفوفة 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var friends = new Array(4); 
friends[0] = "ı.~.."; 


friends[ 1] = "u.>ı"; 

friends[2] = ;"ر"‎ 

friends[3] = "j.-."; 

vari = O0 ; 

while(i<friends.length && friends[i] != " ".ر‎ 
{ 

IF+; 

} 

if(i<friends.length) al ert( ""çöر‎ رصizdi عمر هو‎ : " +); 
</script> 


<meta http-equiv="Content- Type" content="text/ html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body> 

</ body> 

</html> 


http:#flocalhost/lernfajaxltest. html - Windows Internet Explorer‏ چ 


# | http:fflacalhastflernfajaxftest. htrnl اجا اپ‎ [Lvesearh j] جا لر‎ 


n 3%‏ 2 ج 
TF r | OJ http:HNlocalhostflernfajaxftest.html î `” 8 e ” 2” Page ” i Tools ^‏ 


Waiting For http: fflocalhostilernfajaxftest,| | F٣ @ Internet 


التعامل مع النماذج 


اا ل اح الفرح كرا لاه خو مقي جالرف الا ىء هى اقيق لعل ال تق عمل ن 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

function math( ) 

{ 

var num = document.getElementBylI d("num_id").value; 
var sqr = num*num; 

document.getElementByl d("top").innerHTML = " aتliol مربع العدد الذي‎ ١ 
"+sqr; 

} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Ayman</title> 

</head> 

<body> 

<h3> 

<div id="top"></div> 

</N3><br><br><br> 

<form name="form1" > 

من فضلك ادخل رقم لیتم تربيعه 

<input type="text" id="num_id"> 

<input type=" button" onClick="math()" value="send" > 
</form> 

</ bodyY> 

</html> 


2Z Ayman - Windows Internet Explorer 


Fils Edit Yiew Favorites Tools Help 


i #& | Ê hyman 2 2 Bl + FF Tools * 


مربخ العدد الذى ادخلته : 25 


من فضلك ادخل رقم لیتم تبیه |5 اللتقا 


FF @ Theme 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

function show() 

{ 

var string = document.getElementByl d("text_ id").value; 
document.getElementBylI d("top").innerHTML = " di ysaı "+string; 
} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman</title> 

</head> 

<body> 

<h3> 

<div id="top"></ div> 

</N3><br><br><br> 

<form name="form1" > 

الاسم الكريم من فضلك 

<input type="text" name="user_name" id="text id"/ > 
<input type=" button" onClick="show()" value="send"> 
</ form> 

</ bodQdyY> 

</html> 


2 Ayman - Windows Internet Explorer 


N N 7  #B| http:fHlocalhostflernfajaxftest. html ا ب‎ e [Live searh j] ج لر‎ 


—_ = : 5 3 
E | aman ù 7” ® HE ” lir Page ” fF Tools > 


اهلا بك ايسن کزةٌ 


الاسم الكريم من قت لك | اين كرة 


lL € Internet 
: ولكن كيف تمكننا من جلب لاسم؟ انتبه الى الحقل النصي الذي يحمل الايدي‎ 
<input type="text" name="user_name" id="text id'"'/> 
و طاطما عرفنا الايدي خزننا هذا النص في متغير اسميناه سترينخ:‎ 


var string = 
document.getElementById("text_id").value; 


كما هكتنا جلب المعلومات التي يكتبها المستخدم بطريقة ثانية عن طريق اسم الفورم و اسم الحقل 
شاهد الكود : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

function show() 

{ 

var string = form1.user_ name.value; 
document.getElementBylIl d("top").innerHTML = " di ysaı "+string; 
} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman</title> 

</head> 

<body> 

<h3> 

<div id="top"></div> 

</ N3><br><br><br> 

<form name="form1" > 

الاسم الكريم من فضلك 

<input type="text" name="user_name"/ > 

<input type=" button" onClick="show()" value="send"> 
</ form> 

</ bodyY> 

</html> 


„ Î Ayman - Mozilla Firefox 
Fila Edit Yim History Bookmarks Tools Help 


¥ 0 o | ۴ http: ff localhostflernfajaxftest, html Î 
lÎ Most visited 3 L_ustomize Links 3 Free Hotmail 8 Windows Marketplace ۳ Windows Media 3 Windows 


Untitled bocument 3 Ayman x‏ ا 


اهلا بٹ اروس ہھ 


الاسم الکریم من مد آمو ل 


الفصل الثاني اجاكس 


و اخيرا وصلنا الى مبتغانا بفضل الله , تمكنك تقنية اجاكس من جلب العلومات سواء كانت نصية او 
اکس ام ال بدون تحديث الصفحة و بدون ان بلاحظ المستخدم ان الصفحة اتصلت بالسبرفر و هذا ما 
يجعل برمجياتك متميزة عن التطبيقات الاخرى فاطبرمج الذذي يستخدم تقنية الاجاكس في سكربتاته 


XMLHttp Request jiJ 


حسنا الان كلنا عرفنا الاجاكس تقنية رائعة ولكن كيف تقوم الاجاكس بسحب بيانات من السيرفر و 
عرضها بالصفحة بدون اعادة تحميل الصفحة ؟ الحقيقة ان ذلك يتم باستخدام الكائن 
XM اHttpRequestO bj ect‏ و هذا الكائن لديه العديد من الخواص المفيدة التي سناتي 
على ذكرها لاحقا و الان لننشن هذا الكائن و خزنه في متغير و ليكن اسمه هلص 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var ajax = false; 
if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

;(a×Xزa+‏ "" | بفضل الله تم انشاء الكائن بنجاح "" ٠٣۴)‏ اج 
} 

else 

{ 

و( "متصفحك لا يدعم هذا الكائن ")۴۴ اج 

} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<tİt|€> کڪ‎ bis </ title> 

</head> 

<body> 

</ body> 

</html> 


@ hittp:fflocalhost/lernfajaxltest. html - Windows Internet Explorer تا ا‎ × | 


”ار [Lvesearh j‏ ا اي |F | httpifflacalhastflernfajaxftest, htrnl‏ * € ا 


WF r O http: localhost flernfajax test, html . 2 1 e ٣ i Page ” GF Tools * 


2 Windows Internet Explorer 


بفضل الله تم انشاء الخاثن بنجاح : 
[object]‏ 


Waiting For http: fflocalhostflernfajaxftest,| TES € Internet R100 >” 


„ A Page Load Error - Mozilla Firefox 
Files Edit Yiewy History Bookmarks Tools Help 


o ¥ E 4 9 1 0 http: flocalhastflernfajaxftest, hErnl 


Î Most Visited 4 Lustomize Links 3 Free Hotmail 4 Windows Marketplace ۴ Windows Media 3 Winds 


The page at hitp:#flacalhast says: 


بقضل الله ثم انشاء الكاثن بنجاح 
[object R#MLHttpRequEest]‏ 


Read localhost 


اذا كما رايت انشاء الكائن سهل جدا فقط اكتب العبارة 


ajax = new XMLHttpRequest(); 


اما ھذ| :)خReques n0 Ww .XMLHttp‏ ا1])Wwi‏ للتحقق من ان امتصفح یدعم انشاء الکائن 
السطر الذي يحوي الشرط 


الان اصبح الكائن جاهز و مخزن في متغير اسمه ×4[ الان ساضع كود كامل يسحب البيانات من 
السيرفر بطريقة سهلة و باستخدام تقنية الاجاكس , لا تنزعج من طول الكود لانني ساحلله تحت 
المجهر و سشرحه لك سطرا سطرا تفضل اقرا الكود اولا ثم الشرح: 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var ajax = false 

ajax = new XMLHttpRequest(); 
function grab_ data(data_sourse,div_id) 


{ 


if( ajax) 


var ob = document.getElementByl d(div_id); 
ajax.open("get",data_ sourse); 
ajax.onreadystatechange = function( ) 

// start new function body 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 


ob.innerHTML = ajax.responseText; 


} 


} 
// End new function body 
ajax.send(null); 


</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<>ti†|€ < بدانا بالاجاکس‎ >/ title < 

</head> 

<body> 

<br><br><br><br> 

<form> 

<input type="button" value=" ua طial‎ " 
onClick="grab_ data( 'file.txt','left_div')"/> 

</form> 

<2> 

< ۷أ /< هذا النص سيتبخر مجرد الضغط على ilلjر‏ > <div align="left" id="l[eft_dÎV'"‏ 
N2>‏ /< 

</ body> 

</html> 


2 ب آنا بالاجاگس‎ - Windows Internet Explorer EK 


ta aA ” # | http: localhastflernfajaxftest, html EE [Live searh | ج ار‎ 


Fils Edit View Favorites Tools Help 


iz Page ” FF Tools < 5‏ > 3 بدانا جاک | چ 


هذا النص سيتبخر بمجرد الضغط على الزر 


Lal € Internet F100 7” 


Fils Edit Yiey Favorites Tools Help 


بدانا بالاجاکس ع Fr Hr‏ 


| اط هتا 


Thanks god now you are an Ajax programmer this new text 
was in file named : file.txt 


lL Û Internet F100 ~ 
کما تری تم استبدال النص القدیم بنص جدید مكتوب ملف اسمه )× .ع11‎ 
file - Notepad 
Thanks god now you are an Ajax ا‎ 
this new text was in fîle named : fîile.txt 


o Back ” + 8 کر‎ Search Ey Folders 7 1 Folder S4nc 


Address 


file 


a kest 
File and Folder Tasks Text Document a Firefox Docurnent 
1 EB 1 EB 


Î make a nem Folder 
3 Publish this Folder to the 
Web miyboak. 
kl share this Folder 
Other Places 


lğË ern 


8ُ My Documents 
lë Shared Documents 
3 My Loarmpuker 

My Network Places 


Details 


رها تقول ما الجديد في ذلك فقط عرضنا نص؟ لا طبعا انت الان سحبت معلومات من السيرفر بتقنية 
الاجاكس بدون تحديث الصفحة الان لنحلل الكود بسم الله و لنبداً بالبودي قبل الهيد لانه الاسهل, اولا 
نرى النص الاصلي مخزن في d٤7‏ طبعا هذا النص سيطير و يتم استبداله لكن المهم ان هذه ال 1۷ 
تحمل اام left_dÎiV‏ : 


<body> 

<br><br><br><br> 

<form> 

<input type="button" value=" ua طغiaı‎ " 
onClick="grab_data('file.txt','left_div')"/> 

</form> 

<h2> 

<div align="left" id="left_ dİV'" > رjll هذا النص سيتبخر مجرد الضغط على‎ < / d< 
</ N2> 

</ body> 


و هناك ايضا زر مهمته ان يستبدل النص القديم باخر جديد حيث استخدمنا الحدث اون كليك و 
الفنكشن 4أUQ4_ g۲4‏ اي ان الفنكشن سيتم استدعائها اذا ضغط المستخدم على الزر و مررنا 
قيمتين لهذه الفنكشن اول قيمة هي اسم الملف .116و الثانية اسم ال 17 و هي 
:left_ div‏ 


<body> 

<br><br><br><br> 

<form> 

<input type=" button" value=" la hiiı " 
onClick="grab_ data( 'file.txt','left_div')'"/> 

</form> 

<h2> 

d۷ <‏ /ک< هذا النص سيتبخر مجرد الضغط على الjر <div align="left" id="left_dİV">‏ 
</RZ2>‏ 

</ body> 


و اريد ان احذرك من خطأً بسيط لكنه خطير و يقع فيه اقوى امبرمجين بسبب السرعة فاياك ان تكتب 
السطر السابق بهذه الطريقة 


onclick="grab_ data(""file.txt","left'")" /> uz 


onClick="grab_data('file.txt','left_div')'"'/> .ح‎ 


و الان لننتقل القسم هيد قبل ان نبدا الفنكشن نريد انشاء الكائن بكل سهولة كما تعلمنا : 


var ajax = false 
ajax = new XMLHttpRequest(); 


اما اذا خزننا القيمة البولونية 118€ بهذا الكائن لكي نتحقق فيما بعد هل تم انشاؤه بنجاح . 


الان و بعد ان اصبح الكائن جاهز كيف نقوم بجلب البيانات من السيرفر لا بد من صناعة فنكشن ما 
رايك ان نسميها 2 g۲40_U3‏ و سنمرر لها معاملين الاول اسم الملف da4_S01۲9€‏ اما 
المعامل الثاني فهو 1_1 : 


function grab_ data(data_sourse,div_id) 


اول ما سنكتبه في هذه الفنكشن هو التحقق من ان المتغير ه3۹ هل يحمل فعلا 
الکائن†S XM L'Http R e٩18‏ او معنی اخر ھل تم انشاء الکائن بنجاح فلا بد من عبارة 1f‏ 


: الشرطبة‎ 
function grab_data(data_sourse,div_ id) 


i۴) aj aھ×(‎ 


} 


السطر التالي سهل جدا و مر معنا بالفصل السابق عشرات الممرات : 


var ob = document.getElementByl d(div_id); 


الان وصلنا الحزء المهم لدينا خاصية مفيدة جدا تستخدم مع هذا الكائن و الخاصية €۸ 0P‏ حيث 
نمرر لهذا الخاصية معاملين او بارامترين الباراميتر الاول هثل الطريقة التي ستسحي بها البيانات هل هي 
GET‏ ام ۴0٥91‏ اما الباراميتر الثاني نضع فيه اسم او مسار الملف da)4_8S01۲8€‏ 

لكي لا تحتار ساخبرك بالسر عندما تستقبل بیانات من السیرفر استخدم 1 اما اذا اردت ان ترسل 
بیانات استخدم ۴081 : 


ajax.open("get",data_ sourse); 


و هذا الكائن لديه خاصية تراقب حالة الکائن XMLHttp R€q UES‏ تڌدعy:‏ 

nreadystatechan ge‏ عندما تسند هذه الخاصية لفنكشن بالجافا سكريبت فسيتم 
استدعاء تلك الفنكشن في كل مرة تتغير حالة الكائن فمثلا عند ارسال بيانات تتغير حالة الكائن و كذلك 
عندما تسحب بيانات تتغير حالة هذا الكائن و بالتالي يتم استدعاء الفنكشن . نحن تعودنا ان نصنع 
الفنكشن بهذه الطريقة 


function fun_ name() 


{ 


} 


اي نكتب كلمة 111٥101۸‏ ثم الاسم الذي نختاره نحن اما الان فسنصنع فنكشن بدون اسم يطلق 
عليها البرمجون اسم الفنكشن الممجهولة لانها بدون اسم ٠‏ 


function grab_data(data_sourse,div_id) 


{ 


if(aj aX) 


{ 

var ob = document. getElementByld(div_ id); 
ajax.open("get",data_sourse); 
ajax.onreadystatechange = function( ) 
// start new function body 


{ 


} 
// End new function body 


} 


الان و بعد انا صنعنا الفنكشن المجهولة و اسندنا اليها خاصية onreadystat€c]A1£€‏ 
سنكتب جسم الفنكشن الجديدة سيحتوي جسم الفنكشن الجديدة على شرطين و بعد تحقق هذين 


O 


function grab_data(data_sourse,div_ id) 

{ 

if(aj aX) 

{ 

var ob = document. getElementByld(div_id); 
ajax.open("get",data_sourse); 
ajax.onreadystatechange = function() 

// start new function body 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


ob.innerHTML = ajax.responseText; 


} 


٣ 
// End new function body 
ajax.send(null); 


} 


الشرط الاول 4 == 5t2)‏ adyءax.rلa‏ دعني اشرح لك الخادية€e2dy¥8Stat!؟‏ هذ 


الخاصية تخبرك قن مدن اکال تحميل البيانات فرما انت تحمل صور ضخمة و تاخذ هذه الخاصية 


القيم التالية: 


O uninitialized 
1 loading 

2 loaded 

3 interactive 
4 complete 


الذي يهمنا هو 4 عع 1م۳٥‏ اي عندما تكون قيمة 94€ ۲۴6407¥ تساوي 4 فهذا يعني 


ان التحميل قد تم. 


اما الشرط الثاني :200 == ajax.status‏ 


الخاصية 8ا84 ايضا احد خواص الكائن ۸۴4€ XM] {tp‏ و تاخذ القيم التالبة : 


200 OK 

201 Created 

204 No Content 

205 Reset Content 

206 Partial Content 

400 Bad Request 

401 Unauthorized 

403 Forbidden 

404 Not Found 

405 Method Not Allowed 

406 Not Acceptable 

407 Proxy Authentication Required 
408 Request Timeout 

411 Length Required 

413 Requested Entity Too Large 
414 Requested URL Too Long 
415 Unsupported Media Type 
DOO Internal Server Error 
SO1Not Implemented 

502 Bad Gateway 

D03 Service Unavailable 

D04 Gateway Timeout 

DOS HTTP Version Not Supported 


فعندما تحمل الخاصية 814118 القيمة 200 فهذا يعني ان كل شي تام التمام كما يقولون باللهجة 


المصرية 


۰ 
۰ 


الان اصبحت البيانات جاهزة تماما م يبقى الا ان نستقبلها و ثم نعرضها ف الصفحة 


استقبال البيانات 


اذا كنت تستقبل بيانات نصية استخدم الخاصية Text‏ '€eS501۸S€r؟‏ 
اما اذا كنت تستقبل بيانات 11× استخدم Jlخlږiz response XML‏ 


و ما انك تستقبل بيانات نصية في مثالنا هنا طبعا ستستخدم ×1 ۲۴5501۸۱86 کالتالی: 


function grab_data(data_sourse,div_ id) 


{ 
if(aj aX) 


{ 


var ob = document.getElementByl d(div_id); 


ajax.open("get",data_sourse); 
ajax.onreadystatechange = function() 
// start new function body 


{ 


if(ajax.readyState == 4 && ajax.status == 200) 


ob.innerHTML = ajax.responseText; 


} 


// End new function body 
ajax.send(null); 


} 


الان وصل ساعي البريد و يطرق بابك لتستلم الطرد البريدي مم يبق الا ان تفتح الباب و تستلم تلك 
البيانات . الخطوة الاخرة و التى شبهتها لك بفتح الباب هى الخاصية @ 861 فاذا كنت قد 
استخدمت الطريقة جيت مرر لها القيمة 811 اما عندما تريد ارسال بيانات بالطريقة بوست عندها 


مرر لها قيمة نصية انظر كيف تستخدم هذه الخاصية: 


function grab_data(data_sourse,div_ id) 

{ 

if(aj aX) 

{ 

var ob = document. getElementByld(div_id); 
ajax.open("get",data_sourse); 
ajax.onreadystatechange = function() 

// start new function body 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 


ob.innerHTML = ajax.responseText; 


} 


// End new function body 
ajax.send(null); 

1 

} 


مبرووووووووووووووك الان تستطيع ان تقول باعلى صوتك انا مبرمج اجاكس طاما انهيت هذا الكود لن 
يصعب عليك ٿىء ان شاء الله 


تطبيق اخر 


كثرة الامثلة و التطبيقات عندما تجرب و تكتب الكود بيدك بدون نسخ و لصق هو ما يجعلك مبرمج 
محترف الان سنكتب معا سكربت اعتمادا عل نفس الدالة و لكن الان لدي ثلاثة ملفات نصية و كل 
ملف مخصص ليتم عرضه كشرح موجز للاسم الذي تمر فوقه الماوس مثلا عند مرور اماوس فوق كلمة 
تقنيةالاجاكس فسوف يظهر شرح لهذه التقنية بالانكليزي Help you to fetch daa:‏ 
rm the server without reloading the page‏ و ھکذا الان نحتاج الى 
ثلاثة ملفات نصية ضعها بنفس المجلد : 


File Edt YVimw Favorites Tools Help i 


| 0 ا‎ 
ا‎ 7 î ص‎ Search E Folders 1 Folder Sync 
: Ëğ £1 Documents and Settingslûyman Desktop û jax 0دا په‎ 


File and Folder Tasks 


3 Make a new Folder 
a Publish this Folder to the 
web 


Firefox Docurnenk 
E Share this Folder ال‎ E Z KE 


Other Places 


Desktop‏ ر2 


E My Documents 
lğ Shared Documents 
FH My Computer 

2 My Mebwork, Places 


Details 


و ٤‏ کل ملف اکتب شرح ف 


i css - Notepad 
File Edit Format YWiemw Help 


Help you with formatting the web page 


الان م يبق علينا الا الكود تفضل : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var ajax = false; 

ajax = new XMLHttpRequest(); 

function grab_data(data_sourse,div_id) 

{ 

if(aj aX) 

{ 

var ob = document. getElementByld(div_id); 
ajax.open("get",data_sourse); 
ajax.onreadystatechange = function () 

// start new function 

{ 

if(ajax.readyState == 4 && ajax.status == 200) 
{ 


ob.innerHTML = ajax.responseText; 
} 

1 

// End new function 
ajax.send(null); 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title> Ayman for programming</title> 

</head> 

<body> 

<table width="500" border="0" align="center" cellpadding="3" 
cellspacing="3"> 

<İIr> 


<td width="33%" align="center" 

onmouseover="grab_ data('ajax.txt',' details')" >< 1> تقنية الاجاکنڻ‎ 

</ hN1></td> 

<td width="33%" align="center" 

onmouseover="grab_ data('css.txt','details')"><h1>CSS </h1></td> 
<td width="34%" align="center" 
onmouseover="grab_data('php.txt','details')"><hl>php</hN1></td> 
</tr> 

</table> 

<p>&nbsp; </p><font size="4" color="#993300"> 

<div id="details" dir="ltr"></ div> 

</font> 

</ body> 

</html> 


ليس هناك جدید سوی اننا انشانا جدول ثم وضعنا الحدث 0112018۵0۷6۲ لک یتم شرح 
الكلمة التي تمر الماوس فوقها : 


onmouseover="grab_data('ajax.txt','details')" 
و الجديد ايضا هنا اننا ناخذ البيانات من ثلاثة ملفات نصية و ليس ملف واحد‎ 


"grab_ data('ajax.txt','details')" 
"grab_ data('css.txt','details')" 
"grab_ data('php.txt','details')" 


طبعا 4٥٤3118‏ هو اسم ال1۷ لاحظ الكود : 
<div id="details" dir="ltr" > </ div>‏ 
الان لنجربها بامتصفح : 


Ayman for programming - Mozilla Firefox‏ ت 
Fils Edit Yew History Bookmarks Tools Help‏ 


+ 0 4 | 8 http: fflocalhostflernfajax}test, html TI 7” Gl” 


Mast Yisited ۳ Lustomize Links ۴ Free Hotmail 8 Windows Marketplace ۴ windows Media 5 Windows 


php )8SS تقنية الاجاكس‎ 


و اذا وضعت الماوس فوق تقنية الاجاكس ستلاحظ : 


. J Untitled Document - Mozilla Firefox 
Files Edit Yiew History Bookmarks Tools Help 


> 5 A ( 5 http: fflocalhostflernfajaxMaster_ûjax_pra TF ” Gl” 


lÎ Most visited ۴ Lustomize Links ۴ Free Hotmail ۳ windows Marketplace 3 Windows Media ۴ Windomys 


تقنية الاجاكس 88S؟) php‏ 


Help you to fetch data from the server without reloading the page 


و كذلك عند مرور الممؤشر فوق C88‏ سيتغير النص 


¥ Untitled Document - Mozilla Firefox 
Fils Edit Yiew History Bookmarks Tools Help 


r 0 A ( ٣ http: flocalhastflerry ajax Master_ûjax_pro TT 7” l7 


Most Yisited 3 Lustomize Links ۴ Free Hotmail ۴ Windows Marketplace ۴ Windows Media 4 Win dos 


php )8SS تقنية الاجاكس‎ 


Help you with formatting the web page 


الاتصال بسکربتات ٣p‏ م 


فاه حلي ماات صا من ملف ى كن اا 2 رفا لاال ست و اق ن ار اسل ا 
تقضون قط غر إن الارامير آلان الرر الشكفن لصح بام ملف السكرمت اول افها ,ملف ديد 
بالدريم ويفر او اي محرر و اكتب فيه التالي: 


<html> 

<head> 

<meta http- equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<?php 

و" الحمد لله نجح الاتصال فهذا النص مکتوب ملف بي اتش بی '" ٤٣١٣م‏ 


ثم احفظ هذا املف بالاسم Sc۲1.616‏ مثلا الان بقي علينا ملف الهوتميل و ليكن 
1اط test.‏ اکتب فيه الکود التالی: 


اذا م نغير شيء عن الامثلة السابقة فقط غبرنا 8١1P.‏ الان لنستعرضه في المتصفح اوبرا : 


Ayman for programming - Opera 


File Edit Yiew Eookmarks Widgets Tools Help 


Mew tab E E e e Ig 4‏ ق 


u w9  & #7 |1 hitpilflocahostflermfajaxftest.himl 


سنقاول الاتصال بسكربت بي اتش بي و نطبع النس المشزن بداخل 


و اذا ضغطنا على الزر بتغر النص : 


Ayman for programming - Opera 


Fila Edit Yim Enokrmarks Widgets Tools Help 


5| LE BB Ayman For programming xX FÎ 


X | ف‎ 
AES G2 6 
ا‎ e 9 پا‎ TE 


الحمد بل نجح الاتصال فهذا اللص مكثوب بملف بي اتش بي 


انتبه الى ضرورة وضع ملف البي اتش بي بنفس الممجلد: 


5 test IIs suript 
île and Folder Tasks Firefox Document FHF Srript 
ã KE 1 EE 


| ۰ | لالت تقنبات 6 8 


قبل ان نبدأً بسكربت متقدم ساعطيك امثلة بسيطة و سهلة تمهد لذلك اممثال المتقدم اذا لنبداً ببسم 
الله 


راون 


يكمن السر باستخدام الخواص 81€ و C010۲‏ لاحظ الممثال : 


۰ 
۰ 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
function change_color(my_ color) 


{ 


document.getElementBylI d("top").style.color = my_ color; 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title> Ayman for programming</title> 

</head> 

<body> 

<form> 

<input type="button" onClick="change_ color('red')" Val U€=" hii Jضفت‎ 
"هنا‎ < 

</form> 

<h3> 

<1۷ />سيتغير لون هذا النص بتقنية الاجاكس <"م0p"=ل|‏ ۷أك> 

</ N3> 

</ body> 

</html> 


"Ayman for programming - Opera 


File Edit Yiew Eookmarks Widgets Tools Help 


ا 
New tab Ayman For prograrnmirng |‏ ۹ 


o ت‎ e pp 7 # | |] httpifflocalhastflernf ajax test. html 


e 


سيتغير لون هذا النص بتقنية الاجاكئس 


واا فل الرس لون ال احفر" 


1. Ayman for programming - Opera 
Fils Edit View Bookmarks Widgets: Tools Help 
01 Mew tab Ayran For prograrnrnirng a | 


| a pe FF i #” | Û Pttpifflocalhastflernfajaxftest, html 


سيتغير لون هذا النص بتقنية الاجاكس 


کما تری اصبح لونه احمر 


selectedIndex i_ںاiiلl‎ 


الان سنكتب سكربت بسيط يوضح لك استعمال الخاصية ×41۸4€ ع٥861‏ فعندما يكون لديك 
قانمة منسدلة و يختار المستخدم الخيار الاول تعطيك0 و الخيار الثاني تعطيك 1 و هكذا : 


<html dir="rtl"> 
<head> 
<script type="text/j avascript"> 


function show_select() 


var selected = 
document.getElementByl d("optionList").selectedl ndex; 
alert(selected); 


yT </script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman for programming</title> 

</head> 

<body> 

<form> 

<label> 

<select id="optionList" onChange="show_select()" > 
<OptİON >J ylıilı</ option > 

<OpİON > lı رlıèlı</‎ option > 

<OptİON > ill رlıخلı</‎ option > 

<option > gıljll yluil</ option> 

<OPptİON > ڻماخlı‎ lul < / OptiON> 

</select> 

</form> 


</ body> 
</html> 


2 Ayman for programming - Windows Internet Explorer 


+ ê Ayman for pt... 3 | & http: flocalhasktf..,., 


FF @ Internek 


@ Ayman for programming - Windows Internet Explorer 


EN aN 7  @| Dttpifilocalhostjlernfajaxftest, html اجک ب‎ [Live searh | اس‎ 


چا 


" ٣ = 8 3 
E Ayman for pr... X | € hitp:flocalhost!... Fî `” ® fh >” Fy Page > TF Tonls > 


الخيار الخامس | الخيار الخامن ب 


%1 Windows Internet Explorer 


[gl €Û Internet F100 7 


سحب بیانات ا1آ 


اولا انشا ملف جدید و اكتب فيه الود التالي ثم احفظه باسم 1"×.ع]1؟ : 


<?xml version="1.0" encoding="utf-8"?> 
<options> 

<option>red</ option> 

<option>green</ option> 
<option > blue</ option> 

</ options> 


الان نريد جلب الالوان ال مخزنة لدينا في هذا الملف كيف؟؟ اولا سننشأً فنكشن اسمها g€†_×1١1‏ 
بنفس الطريقة التي تعلمناها سابقا حاول ان تقراً الكود : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect(" Microsoft.XMLHTTP"); 


if(window.XMLHttpRequest) 

= new XMLHttpRequest(); 
options_arr = new Array(); 
var java_ arr = new Array(); 
function get xml(data_ sourse,div_id) 


{ 


if(aj aX) 


ajax.open("get",data_sourse); 
ajax.onreadystatechange = function() 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 


xml_ document = ajax.responseXML; 
options_ arr = xml_ document.getElementsByTagName("option"); 
for(var i=0;i<3;i++) 


java_arr[i]= options_arr[1].firstChild.data; 

} 

alert(java_ arr); 

1 

} 

ajax.send(null); 

} 

1 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman for programming</title> 

</head> 

<body> 

<form> 

<input type="button" onClick="get_xml('file.xml','top')" value="click 
here"> 

</form> 

</ bodQdyY> 

</html> 


اولا هذا السطر يستخدم مع المتصفح انترنت اكسبورر ٠‏ 


ajax = new ActiveXObj ect(" Microsoft.XMLHTTP"); 


ثم انشأنا مصفوفتین فارغتين سيتم تعبأتهم لاحقا : 


var options_arr = new Array(); 


var java_arr = new Array(); 


المصفوفة 18_2۳ 1]0) OP‏ ستحوي عناص 1[ و ليس نصوص اما المصفوفة 4۷24_21۲۲[ فھی 
مصفوفة جافا سكريبت عادية سنخزن فيها عناصر نصية هي الالوان . 


اولا سنقوم بجلب بیانات ملف الاکس ام ال و نخزنها متغیر امه 1€ ×٣1_d40C11€‏ و ذلك 
باستخدام خi»l responseXML‏ 


xml_document = ajax.responseXML; 


الان سنخزن عناصر الاكس ام ال التي جلبناها في المصفوفة التي عرفناها P)]0 18_2٣‏ و ذلك 
باستخدام الخاصية 212€ E ا]emصeعnts BY aN‏ tعع‏ التي تستدل علی العنصر من خلال اسمه 


xml_ document = ajax.responseXML; 
options_arr = xml_ document.getElementsByTagName("option"); 


الان لدينا المصفوفة P10 ۸18_23 ۲١‏ جاهزة و تحوي البيانات لكن صيغة تلك البيانات على شكل 
عناصر اكس ام ال فكيف سترجمها الى عناصر نصية يكون ذلك بالعبارة التالية: 


options_arr[0].firstChild.data JياJi العنصر‎ 
options_arr[1|.firstChild.data jناثلا العنصر‎ 
options_arr[2].firstChild.data iùلنlنلا العنصر‎ 


و لكن انا كمبرمج اجاكس لا اكتب هكذا لان هناك اختراع اسمه حلقة فور : 


options_arr = xml_document. getElementsByTagName("option"); 
for(var i=0;i<3;i++) 


java_arr[i]= options_arr[i].firstChild.data; 


تطبيق اخر 


سنقوم بانشاء قانمة اختيارات و حيث ان هناك اكثر من طريقة للتعامل مع النماذج بواسطة الجافا 
سكريبت حاول قراءة الكود عدة مرات سيكون الشرح داخل الكود : 


<html> 

<head> 

<script type="text/j avascript"> 

function ayman_ fun() 

{ 

var ob = document.getElementBylI d("optionList"); 
alert(ob.options[ 1 ].firstChild.nodeValue+" : Jui"); 
alert (ob.options[ 1].teX +" : و( "طريقة ثانية للحصول على نٿ‎ 
alert(ob.options[ 1].value+" : "'تعطيك القيمة فاليى‎ 

و( "طريقة اخرى للحصول على الفالي : "+ alert(ob.options[ 1].getAttribute('"' value")‏ 
و(" اندكس العنصر الذي تم اختيرo‏ : " alert(ob.selectedl ndex+‏ 

if(ob.options[ 2].selected) al ert(" رiنخال و( "لقد قمت باختيار اللون‎ 
var index = ob.selectedl ndex ; 

var user_select = ob.options[index].text; 
alert(user_select); 

ob.options[O0].text = "new option"; 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<p>&nbsp; </p> 

<form id="form1" name="form1" method="post" action=""> 
<select id="optionList" onchange="ayman_fun()"> 

<option value="red"> „>ı</ option> 

<option value="blue"> aرjı</‎ optioNn> 

<option value="green"> yèiı</ option > 

</select> 

</form> 

</ body> 

</html> 


{Untitled Document - Windows Internet Explorer 
#@ | htkpiflocalhastflernfajaxfoptions, htrnl اا اب‎ [Live search| ج ال‎ 
۳ ¥ 


3# . آ 
Em ” yr Page r iF Tools r”‏ لظ ”ˆ untitled Document i‏ | ¥ 


Win dows Internet Explorer 


اندتس الحنصر الذق تح اختبارة : 2ے 4 


Lal €P Internet F100 7” 


طبعا عندما تغير اللون سيظهر لك حوالي © رسائل و ليس هذه فقط 


2 Untitled Document - Windows Internet Explorer 


a aul ” # | http: flocalhastflernfajaxfoptions ,htrnl ااج اي‎ [Live search j] 


س 


TF 7 | untied Gocument 


FF Internet F100 >” 
FI 1 


الان جهزت لك تطبيق اجاكس رائع و ان شاء الله تستفيد منه سنسمح للمستخدم بحذف جميع عناصر 


القامة و استبدالها بقامة اخرى: 


<head> 
<script type="text/j avascript"> 
function add options() 


var selectControl = document.getElementByl d('optionList'); 
selectControl.options.length = 0; 

var arr_options = new Array(" black","red","green"); 
for(i=O0;i<arr_options.length;i+ +) 


selectControl.options[i] = new Option(arr_options[i]); 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<p>a&“nbsp; </p> 

<form id="form1" name="form1" method="post" action=""> 

<select id="optionList"> 

<option value="red">,ر,..ı</‎ option> 

<option value="blue"> aji </ optioNn> 

<option value="green"> yjèsı</ option > 

</select> 

</form> 

<br /><br /> 

احذف جميع الخيارات و,"=€u <input type="button" onclick="add_ options()" val‏ 
< /"استدبلها بقانمة اخرى 

</ bodQdyY> 

</html> 


اول فكرة هي حذف جميع عناصر القانممة: 
selectControl.options.length = O;‏ 


الفكرة الثانية هي اضافة عناصر جديدة 0101© 10W‏ الى المصفوفة 081018 طبعا حرف 
Option‏ © كبر و ليس © صغير و الان لنجربها بالمتصفح : 


` J Untitled Document - Mozilla Firefox 
File Edit Yew History Bookmarks Tools Help 


A | 8 http: flacalhostflerrajaxfaptians ,hErnl‏ 0 ب 


A] Most visited 3 Lustomize Links ۴ Free Hotmail 3 Windows Marketplace ۴ Windows Media 3 Wirdotms 


E Untitled Docum... ا‎ Untitled Cocurm... E Untitled Locum... ا‎ Untitled Docu... 3 Untitled... E | ~” 


و بعد الضغط على الزر تصبح القانممة انكليزي : 


1 Untitled Document - Mozilla Firefox 
Files Edit Yim History Bookmarks Tools Help 


+ E o ( ۴ Http: flocalhastflernfajaxfoptions, hErnl ka ol” 
lÎ Most visited ۴ Lustomize Links ۴ Free Hatrnail 3 Windows Marketplace ۴ Windows Media 3 Wirdoys 


Untitled Docurm... EB Untitled Locum... 8 Untitled Locum... 4 Untitled Docu... ۴ Untitled... E | ~‏ ا 


الان نريد ان نتعلم كيف نسمح للمستخدم بتغيير لون النص كما هو الحال عند كتابتك رسالة بصندوق 
سحري او محرر نصوص اولا سننشاً ملف البي اتش بي و الذي يحوي بيانات اكس ام ال : 


<?php 


header("Content-type: text/ xml"); 

print "<?xml version='1.0' encoding='utf-8' ?>"; 
print "<alloptions>"; 

Şarr = array("red"," green"," blue"); 
for($i=0;$i<count( $arr);$i+ +) 


print "<option>".Şarrl[ $i]."</ option>"; 


print "</ alloptions>"; 
2< 


& http:fflocalhostilernfajaxIscript. php - Windows Internet Explorer 


ت 


”ج لر [Live searh j‏ اا اب httpiflacalhastflernfajaxfscript,php‏ | @# اا € 


Fv 


: ج‎ 3 
TF Hr BE = @tetpiflocah... X | untitled Document | F7 O 7 E - Page - EF Tools < 


<îxml version="1.0" encoding="utf- 8" ?>» 
- xallOptions zz» 
zoptionzred xoptionz 
zap tion zgqreen </ option > 
zap tion zbluez/optionz 
zop tion zyellow =/optionz 
zoptionzorange=/optionz= 
zap tion z> purple = optionz 
< alOptionsz 


la €Û Internet FE 100% > 


الان بقي علینا ملف الھوتمیل †1١1‏ 010۸8.1۸ ساکتب الکود کاملا ثم اشرحه شرح مختصر لان 


<html dir="rtl" > 

<head> 

<script type="text/ javascript" > 

var ajax = false; 

if(window .ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect(" Microsoft.XMLHTTP"); 
} 

else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


E E E E E i E E i i o o oh a E oh I o o hk o oh O o 


var options_arr = new Array(); 
function getOptions( ) 
{ 


i۴) aj aھ×(‎ 


ajax.open("get","script.php",true); 
ajax.onreadystatechange = function( ) 


{ 

if(ajax.readyState == 4 && ajax.status == 200) 
{ 

xmIlDocument = ajax.responseXML; 

options_arr = xmlDocument.getElementsByTagName("option"); 
list_ options(); 

} 

} 

ajax.send(null); 

} 

} 


function setOption( ) 

{ 

var index = 

document.getElementByl d("optionList").selectedl ndex; 
document.getElementBylI d("center").style.color = 
options_arr[index].firstChild.data; 


function list options() 


var selectControl = document.getElementBylIl d("optionList"); 
for(i=O0;i < options_arr.length;i+ +) 

{ 

selectControl.options[i] = new 
Option(options__arr([i].firstChild.data); 

} 

} 

I Ca TG E YS 

</ script> 

<meta http-equiv="Content-Type" content="text/ html; 
charset=utf-8" / > 

<title> Ayman for programming</ title> 

</ head> 

<body> 

<p>a&anbsp;</ p> 

<form id="form1" name="form1" method="post" action="" > 
<select id="optionList" onChange="setOption()" > 

</ select> 

</ form> 

<br / ><br / > 

<input type=" button" onclick=" getOptions()" value=" jigلاا‎ ail /"اظهر‎ < 
>۸2< :غر لون هذا النس‎ >٣< 

الحمد لله الذي هدانا لهذا و ما كنا لنهتدي لولا ان <div align="center" İÎd=" Ce nt©r" > Uil‏ 
div<‏ / > لل 

</ h2> 

</ body> 

</ html> 


. Û Ayman for programming - Mozilla Firefox 
Fila Edit Yiemw History Bookmarks Tools Help 


+ CE A | 3 Http: fflocalhostflernfajaxfoptions, htrnl TR + Ol” 
Most Visited 3 Customize Links ۳ Free Hotmail ۴ windows Marketplace ۴ windows Media 3 Windoms 


4 http:f...E.php E http:f...E. php 8 Untitled Doar... ۳ Untitled Doar... 8 Untitled Dar... ۴ Ayma... * af | ” 


| ال 


غير لون هذا النص: 
الحمد لله الذي هدانا لهذا و ماكنالنهتدي لولا ان هدانا الله 


xmlDocument = ajax.responseXML; 


اولا سحبنا البيانات من الملف المموجود بالسيرفر باستخدام خاصية ]¥ ۲€S50۸18S€×X‏ و خزنھا ف 
المتغر ڄ10(0C11۸€1۸٣]×‏ لکن هذه تمثل الملف باكمله و انا لا اريد سوى عناصر الاوبشن , 
لسحب عناصر الاوبشن نستخدم الخاصية getElements By T'agN2a1^€‏ : 


options_arr = 
xmlDocument.getElementsByTagName("option"); 


و لكن هذه البيانات ما تزال عناصر اكس ام ال و ليست نصوص اي انها على هذا الشكل : 


<option>red</option> 
<option>green</option> 
<option>blue</option> 


لتفريخ النصوص المحتواة داخل المصفوفة لا بد من استخدام الخاصية firstChi11d.data:‏ 


اما لتغيير لون النص نستخدم العبارة 
document.getElementByld("center").style.color‏ 


الفكرة الاخيرة هى بزرع خيارات جديدة او انشا كائنات جديدة من نوع اوبشن و ضمها للمصفوفة 
options‏ : 


selectControl.options[i] = new 
Option(options_arr[i].firstChild.data); 


GE 1 الطريقة‎ 


غالبا ما نستخدم G1‏ عندما تكون حجم البيانات صغير و ان لا تكون البيانات سرية : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


} 
else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


var optionsArr = new Array(); 

function getData(colors) 

{ 

if(aj aX) 

{ 

var url = "script.php?colors=" +colors; 
ajax.open("get",url, true); 
ajax.onreadystatechange = function() 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


var xmlDocument = ajax.responseXML; 
optionsArr = xmlDocument.getElementsByTagName("option"); 
makeOptions(); 


} 


ajax.send(null); 


function makeOptions() 

{ 

selectControl = document. getElementByl d("selectl d"); 

for(i=0;i < optionsArr.length; i++) 

{ 

selectControl.options[i+1] = new Option(optionsArr[i].firstChild.data) ; 


IEEE E E E E EE E E E E OE E o f 
function setOption() 


{ 

var index = document. getElementByl! d("selectl d").selectedl ndex; 
document. getElementByl! d("textl d").style.color = 
optionsArr[index ].firstChild.data; 


IMR EEE EEE E ol E o E E E 


</script> 

<meta http- equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Ayman for programming</title> 

</head> 

<body> 

<form> 

<select id="selectl d" onChange="setOption()"> 

<option selected>iyg zèı </ optioNn> 

</select> 

<input type="button" value="click here" onClick="getData(1)"> 
<input type="button" value="click here" onClick="getData(2)"> 
</form> 

<div id="textl d"> 

<۸1 /> لله کر <1> 

</div> 

</ body> 

</html> 


ar url = "script.pمhp?colors=" + colors;‏ عندما تقر هذا السطر 


ی کن و ی ی ی 
باستقبال هذا المتغير؟؟ الجواب هو باستخدام المصفوفة 1]٥010۲8[‏ 8_6 لاحظ كود البي اتش 


۰ 


86 * 


<?php 

header("Content-type: text/xml"); 

print '<?xml version="1.0" encoding="utf-8"?>'; 
print "<allOptions>"; 

If($%$_ GET[colors] == 1) 

{ 


$arr = array("red","green","blue"); 


} 

if($_ GET[colors] == 2) 

{ 

$arr = array("yellow", "orange", "purple"); 
1 

for($i=0; $i < count($arr); $i++) 

{ 


print "<option>". $arr[ $i]."</option>"; 


print "</allOptions>"; 
?< 


يختلف هذا الممثال عن الذي قبله اننا اضفنا مجموعة جديدة من الالوان فاذا اختار المستخدم اممجموعة 
الاولى سرسل متغرS؟C010۲‏ بواسطة جيت الى السكربت و هذا المتغر سيحمل القيمة واحد اما اذا 
ضغط الممستخدم الزر الثاني سيحمل المتغير القيمة 2: 


Ayman for programming - Windows Internet Explorer 


# | http: lacalhastflernfajaxftest, html کو ااج اب‎ [Live searh | ”ا لار‎ 


+ 


ا 


2 د‎ 3 
¥ # 7 € http: localhost... € Ayman FB... X i ل‎ i 7” [iF Page ” iff Tools 7 


الله اكير 


Ll Û Internet F100 >7 


٥۴0٥S 1 الطريقة‎ 


هذه الطريقة نستخدمها عندما نريد ارسال بيانات ضخمة و سرية حيث يتم تشفيرها لكي لا يتمكن 
الهكر من التقاطها ٠:‏ 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/j avascript"> 

var ajax = false; 

if(window.ActiveXObj ect) 


1 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


var optionsArr = new Array(); 

function getData(colors) 

{ 

if(aj aX) 

{ 

var url = "script.php"; 

ajax.open("post",url, true); 
ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 

ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


xmlDocument = ajax.responseXML; 
optionsArr = xmlDocument.getElementsByTagName("option"); 
makeOptions(); 


ajax.send("colors=" +colors); 


function makeOptions() 

{ 

var selectControl = document. getElementBylI d("selectl d"); 
for(var i =0;i<optionsArr.length; i++) 


{ 
selectControl.options[i] = new Option(optionsArr[i].firstChild.data); 


// 

//@@QOO@OOOOOOOOOOOOOOOOOOO@O 

function setOption() 

{ 

var index = document. getElementByl! d("selectl d").selectedl ndex; 
document. getElementBylI d("center").style.color = 
optionsArr[index ].firstChild.data 


} 

//Q@@QOO@OOOOOOOOOOOOOOOOOOO@O 

</script> 

</ head> 

<body> 

<form> 

<select id="selectl d" onchange="setOption()"> 

<option> choos one </option> 

<| select><br /> 

<input type="button" value=" dواl‎ jlgلiJi‎ ãعgnج."‎ onclick="getData( 1)" /> 
<input type="button" Val u€=" aldı "مجموعة الالوان‎ oncاick="getData)‎ 2)" 
/></form> 

<div align="center" id="center"> 

<۸1 /> صلی الله على محمد صلی الله عليه و سلم<۸1> 

</ div> 

</ bodyY> 

</html> 


اولا بعد ان استخدمنا الخاصية اوبن و مررنا لها القيمة بوست الان يجب ان نضع الهيدر للصفحة و 


يكون ذلك باستخدام الخlصية :setRequestHead€r‏ 


ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 


و هناك فة جديدة ايضا هى انه مررنا قمة للغاضية سند غوضا عن القيمة تال التى. ودنا غلبها 


عندما کنا نستخدم جیت: 
ajax.send("colors=" +colors);‏ 


ای کے ا رل ااك اوس و ك 5 ارو تر أ فا م اة 
ق ي ۴ 1 س 1 8 ر 
بيت عندها تمرر القيمة نال 1111" و الان الى سكربت البيى اتش بي : 


<?php 

header("Content- type: text/xml"); 

print '<?xml version="1.0" encoding="utf-8"?>'; 
print "<allOptions>"; 

If($_ POSTI[colors] == 1) 

{ 


$arr = array("red","green","blue"); 


} 

If($_ POSTI[colors] == 2) 

{ 

$arr = array("yellow", "orange","purple"); 
} 

for($i=0; $i<count($arr); $i++) 

{ 

print "<option>"; 

print $arr| $i]; 

print "</option>"; 


print "</ allOptions>"; 
?< 


الجدید هو اننا استبدلنا جیت $_ 6٤1‏ باممتغر $_1 ۴0S‏ فقط . لنجربھا بالمتصفح: 


/C Untitled Document - Windows Internet Explorer 


+® ¥ [E] http:fflocalhastflernajaxpostfindex. html أ‎ E ج الل ا‎ 


Fils Edit ie Favorites Tools Help 


3 کک‎ . 3 
E # B0 € http: fflocalhostl,..  @ Untitled Dac... X 2 Bl 7 7” r Pag2 ” e Tools 7 


AMEE‏ ميموحة الالوان الآولى 


صلی الله على محمد صلى الله عليه و سلم 


@ Û Internet FR i00 ” 


جا مكريت من جهة. المردر 


اا کر ال ا کو ا م ا اوا و 6 کو ی ا 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 

var ajax = false; 

ajax = new XMLHttpRequest(); 
function grab_data(data_sourse) 

{ 

if(aj aX) 

{ 

ajax.open("get",data_sourse); 
ajax.onreadystatechange = function () 
// start new function 

{ 

if(ajax.readyState == 4 && ajax.status == 200) 
{ 


eval(ajax.responseText); 


} 


// End new function 
ajax.send(null); 


} 

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ayman for programming</title> 

</head> 

<body> 

<form> 

<input type="button" onClick="grab_ data('java.php')" value="Get java 
from the serV€r"><N1>‌ڪڻأكIجاlا تفنية‎ </ ۸1< 

</form> 

<p>a&nbsp; </p><font size="4" color="#993300"> 

</font> 

</ body> 

</html> 


eVal)ajax.response Text);‏ الجدید هو هذا السطر 


فاذا كان النص الذي جلبته عبارة عن كود جافا سكريبت و تريد تنفيذ هذا الكود استخدم الخاصية 


امع و الان الى ملف البي اتش يم٣‏ ط.vaھز‏ : 


<?php 
print " alert) و(" هذا کود جافا سکربت تم جلبه من الرذر'‎ 
?< 


کما تری بسیط جدا و هذه المرة لا يحوي نصا او بيانات اكس ام ال و انما يحوي كود جافا سکريبت و 
الان لنستعرضه 


lm Ayman for programming - Mozilla Firefox 


File Edit Yim History Eookmarks Tools Help 
ا‎ CC f ا‎ 3 Http: fflocalhastflernajaxfserver_sidefjava, htm TT 7” lr 


lÎ Mast visited 3 Lustomize Links ۴٣ Free Hotmail 4 Windows Marketplace ۴ Windows Media ۳ Wirndons 


Gat jawa from the server 


مي تھ 
نفديه الاجاكس The page at http:#/localhost says:‏ 


هذا ود جافا سكربت تم جلبه من السيرفر ھ 


و لكن انتبه لامر خطير و هو انك لن تستطيع كتابة كود طويل لاکكثر من سطر و اذا فعلت فلن يتم 
تنفيذه لذلك نحن غالبا ما نستخدم جافا سكربت القادمة من السيرفر لاستدعاء فنكشن فقط و هذا 


المثال يوضح ٠‏ 


<html dir="rtl"> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 

ajax = new XMLHttpRequest(); 
function grab_ data(data_sourse) 
{ 

if(aj aX) 

{ 

ajax.open("get",data_sourse); 
ajax.onreadystatechange = function () 
// start new function 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


/lob.innerHTML = ajax.responseText; 
eval(ajax.responseText); 

} 

} 


// End new function 
ajax.send(null); 


function hi(name) 

{ 

document.getElementBylI d("top").innerHTML = "<h1> Welcome " + 
name + "</ h1>"; 

} 

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>Ayman for programming</title> 

</head> 

<body> 

< ۷أ /> هنا سيتم تنفيذ الفنكشن ان شاء الله < "مİd=")0|‏ diVك>‏ 

<form> 

<input type="button" onClick="grab_ data('java.php')" value="Get java 
from the serv€r"><N1>‌ڻuكlجاlا‎ ةıنêت‎ </ N 1< 

</form> 

<p>&nbsp; </p><font size="4" color="#993300"> 

</font> 

</ bodQdyY> 

</html> 


و الان تقل آل ملف آل اتش فن الى ميلغ الفنكشن؛ 


<?php 
print "hi(' Ayman ')"; 
?< 


طبعا اذا كتبت اكثر من سطر لن يعمل الكود مطلقا و الان لنجربه بامتصفح : 


Û Ayman for programming - Mozilla Firefox 
Fils Edit Yiew History Bookmarks Tools Help 


z 0 9 | 3 Http: flocalhastflernfajaxfserver_sidefjawa, htrnl 4 7 Gl” 
Mast Visited ۳ Lustomize Links ۴ Free Haktrnail ۳ Windows Marketplace ۳ Windows Media ۴ Windos 


هنا سيم تنضذ الفنكشن ان ساء الله 


Get java fram the serwer 


تقنية الاجاكس 


و عندما تضغط على الزر سيتم استدعاء الفنكشن بأمر قادم من السيرفر : 


J Ayman for programming - Mozilla Firefox - ]ا‎ × 
Fils Edt Yiew History Bookmarks Tools Help 


r 0 4 ( 8 Http: fflocalhastflernfajaxfserver_sidefjawa, htrnl @ r Gl” 


Most Visited 3 Lustomize Links ۴ Free Hotmail ۴ Windows Marketplace ۳ Windows Media ۴ Windows 


Welcome Ayman 


تقنية الاجاكس 


استرجاع کائن جافا سکریبت 


الان لدينا كائن جافا سكريبت سنكتبه على صيغة نص و ليتم تحويله الى هيئة كائن لاحقا هذا الكائن 
ستكون مهمته استدعاء هذه الفنكشن ٠‏ 


function math(op1, Op2) 

{ 

var sum = opl1 + op2; 

alert(op1 + " +" + op2 +" =" + sum); 
1 


طبعا نحن نستدعي هذه الفنكشن بالطريقة التقليدية هكذا ٠‏ 
math(5,8);‏ 
و لکن هذه المرة سنقوم بانشاء کائن لديه ثلاث خواص: 
اسم الفنكشن مثلا : 2۸۾" 
المعامل الاول مثلا © 
و المعامل الثاني مثلا 8 
الان لدينا متغير نصي تعمدنا كتابته بطريقة عجيبة او غير مألوفة بالنسبة لك لكي نستطيع تحويله الى 


كائن و بالتالي يقوم الكائن باستدعاء الفنكشن ٠:‏ 


var text = "{method: 'math' , num1: 24 , num2: 6};"; 


الان تستطيع انشاء كائن 0© من هذا النص طالطما ان النص يحتوي على الخواص الثلاثة التى ستلزمك : 


var text = "{method: 'math' , num1l: 24 , num2: 6};"; 
var ob ; 
eval('ob='+text); 


لقد استخدمنا الدالة 6⁄41 لانشاء الكائن الان م يبق علينا الا ان نستدعي الفنكشن : 


var text = "{method: 'math' , num1l: 5, numZ2: 8};"; 

var ob ; 

eval('ob='+text); 

eval(ob.method + '(' + ob.num1 + ',' + ob.num2 + ');'); 


كتبنا الخاصيتين اللتان تعبران عن الارقام ثم اغلقنا الة 
فوس و دت ا براں عن م دم س 


„ Converting text to a JavaScript object - Mozilla Firefox 4 ك‎ 
Fils Edit Yew History Bookmarks Tools Help " 


¥ E 4 | | 8 Http: flocalhastlernfajaxfseryer_sidefob,hkı Kr r G7 ر‎ 


Mast Visited 3 Lustomize Links 3 Free Hoatrnail 3 Windows Marketplace ۴ Windows Media 8 Wirdos 


The page at http://localhast says: 


١ 5+8=13 


Read localhasE 


google suggest 


عندما تكتب في حقل النص بغوغل كلمة دروس مثلا تخرج قانمة منسدلة تقترح عليك اقتراحات مثلا 


دروس الفوتوشوب , دروس ریاضیات وهكذا و هذا ما يسمی ب S1££€8S†‏ ع€[£00g‏ 


3 Google - Microsoft Internet Explorer ___ 


File Edit View Favorites Tools Help 
mk <> Û >” «| آ2‎ | „- Search 7T Favorktes ¥ | و کھ ا اا ا‎ 
Address |] htepiffrrem. google.com webhp?complete= 1thl=en E EJ= Links * 
0 O4 le 
Suggest BE 


leb Images Groups Hews Frooale Local HIOLE » 


0 ,ق لاق کے 
ajax public library 40,500 results‏ 
ajax football 454,000 results‏ 
ajax soccer 37 000 rasuls‏ 
ala nir kerinn tranait 1TL razen + =‏ 


ر Intarmeî‏ #آ آ 


3 Google live search - Microsoft Internet Explorer 


File Edit View Favorites Tools Help 1 


Qk <> Û - * 2Î | A ead rao: FF | ® o wÎ > که ا‎ 
Address 8 http ifl flacalhastehD4 goals. html آ>‎ O Links 


Google live search 
Beach for [aja 

results‏ 3,840,000 فة 
ajaš ıîıglerdain SAO results‏ 
ajax f TIMDUD reaults‏ 
jê Otro 2T UUD results‏ 
ajax gps $20 results‏ 


ajax football zhab STA DUD reaults 
ajax publie library 4M, SOU remulis 


ajax football 434000 results 
jA BOCCEY AITUUD results 


ax pickerinz transit 10, UU re gulls 


لے 
lI | [| [| Pflocalintranet 00‏ 


2| Done 


حيث تلقينا من غوغل سطر جافا سكريبت يقوم هذا السطر باستدعاء الفنكشن 
Se€NdRPCDone‏ و ھذە ھی الرامیترات : 


sendRPCDone(unusedVariable, searchTerm, arrayTerm, arrayResults, 
unusedArray) 


قخالكة :النانات الفادمة من غوعل 


اولا سننشن حقل نص و سنربطه بالفنكشن £69188 عن طريق الحدiث oOnK€yYUPp‏ 
الحدث يتحقق مجرد ان يكتب الممستخدم او مسح اي حرف ٠‏ 


>İ"nput type="text" name ="textfield" id="textfield"‏ البحث عن 
onKeyUp="getSuggest(event)">‏ 


الان سنقوم بانشاء عنصر 1۷ لتظهر فيه الاقتراحات : 


<div id="divld"></div><div></div> 


لنقم ببناء الفنکشن ا8 g95 1gg€‏ ثم نرر لھا الکائن ۷8۸٤‏ yعK‏ لکن هذا الکائن غير 
مدعوم من قبل الانترنت اكسبلورر في هذا امتصفح عليك استخدام ^ W1¬d40W.€7€‏ : 


function getSuggest(keyEvent) 
{ 


keyEvent = (keyEvent) ? keyEvent: window.event; 


} 


مكنك ايضا ان تحدد اين يكتب الممستخدم لكن هذا يعتمد على نوع المتصفح بالفايرفوكس استخدم 
الخاصية 14۲€ اما بالاترنت اکسبلورر استخدم :STCEÊle€¬€1†‏ 


function getSuggest(keyEvent) 
{ 


keyEvent = (keyEvent) ? keyEvent: window .event; 
input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; 


1 
و مكنك ان تحدد نوع الکائن ٤۷٤٣٤‏ ۷عK‏ ھل ھو من نوع :key 1P‏ 


function getSuggest(keyEvent) 
{ 


keyEvent = (keyEvent) ? keyEvent: window.event; 
input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; 
if (keyEvent.type == "keyup") 4 


نپ نب 


الاتصال بغوغل 


function getSuggest(keyEvent) 

٤ 

keyEvent = (keyEvent) ? keyEvent: window.event; 

input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; 
if (keyEvent.type == "keyup") { 

if (input.value) 

getData(" google.php?qu=" + input.value); 

} 


else { 


} 
} 
} 


العبارة 618€ تعني هنا ان المستخدم قد مسح الكلمة و بالتالي نحن بدورنا سنمسح الاقتراحات : 


function getSuggest(keyEvent) 

{ 

keyEvent = (keyEvent) ? keyEvent: window.event; 

input = (keyEvent.target) ? keyEvent.target : keyEvent.srcElement; 
if (keyEvent.type == "keyup") { 

if (input.value) { 

getData("google.php?qu=" + input.value); 

} 

else { 

var targetDiv = document.getElementBylI d("targetDiv"); 
targetDiv.innerHTML = "<div></ div>"; 

} 

1 

} 


لننتقل الى الفنكشن 1044ع التي نمرر لها سكربت البي اتش بي و الذي يقوم بدوره بالاتصال 
بغوغل اعتقد انك قد حفظت هذه الفنكشن لانها تكررت مكعنا كثرا 


if (window.ActiveXObj ect) 
ajax = new ActiveXObj ect("microsoft.xmlIhttp"); 
} else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(dataSourse) 


alert("fun"); 
if(aj aX) 


ajax.open("get",dataSourse); 
ajax.onreadystatechange = function () 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


eval(ajax.responseText); 


} 
} 
ajax.send(null); 
} 
1 


استخدمنا الفنكشن الجاهزة 6۷2 لتنفيذ كود الجافا سكريبت و الان م يبق علينا الا الفنكشن 
sen URPCDone‏ التي سنقوم ببنائھا سویا : 


function sendRPCDone(unusedVariable, searchTerm, arrayTerm, 
arrayResults, unusedArray) 


{ 


O E O LS 


function sendRPCdone 
(unusedvariable,search Term, array Term, arrayResults, unusedArray) 
{ 

var data = "<table>"; 

var i ; 

if(arrayResults.length != 0) 


for(i=O0;i < arrayResults.length;i+ +) 

{ 

data += "<tr><td>"; 

data += "<a href = 'http:/ / www.google.com? 
q="+arrayTerm[i]+"'>"; 

data += arrayTerm[i] 

data += "</a> </ td><td>" 

data += arrayResults[i]; 

data += "</td></tr>"; 

} 

1 

data += "</table>"; 

document. getElementBylI d("divl d").innerHTML = data; 


} 


كما ترى وضعنا رابط بحيث اذا ضغط المستخدم على احد هذه الاقتراحات سيتم البحث عنه و اذا 


اردت تنسيق تلك لاقتراحات استخدم السي اس اس : 


<style type="text/css"> 
#divld {4 

background-color: #FFEEAA; 
width: 30%; 

</style> 


الان ساقدم لك الكود كاملا : 


<html dir="rtl"> 
<head> 


<style type="text/css"> 
#divld{ 
background-color: #OCF; 
width: 40% 

1 


</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> 
<title>Untitled Document</title> 

<script type="text/j avascript"> 

if (window.ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect("microsoft.xmlIhttp"); 


} 


else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(dataSourse) 

{ 

if(aj aX) 

{ 

ajax.open("get",dataSourse); 
ajax.onreadystatechange = function () 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


eval(ajax.responseText); 


} 
} 


ajax.send(null); 


// getSuggest 

ی ا ی و کی ی ی ی 
function getSuggest(keyEvent)‏ 

{ 

keyEvent = (keyEvent) ? keyEvent: window.event; 
input = (keyEvent.target) ? keyEvent.target : 
keyEvent.srcElement; 

if (keyEvent.type == "keyup") { 

if (input.value) { 

getData("google.php?qu=" + 

input.value); 


else { 
var targetDiv = document. getElementByl! d("targetDiv"); 
targetDiv.innerHTML = "<div></div>"; 


} 


//sendRPCdone 

oy 

function sendRPCdone 

(unusedvariable,searchTerm, arrayTerm, arrayResults, unusedArray) 


{ 

var data = "<table>"; 

var i ; 

if(arrayResults.length != 0) 

{ 

for(i=0;i < arrayResults.length; i++) 
{ 


data += "<tr><td>"; 

data += "<a href = 'http://www.google.com?q="+arrayTerm[i]+"'>"; 
data += array Terml[i ] 

data += "</a> </td><td>" 

data += arrayResults[i]; 

data += "</td></tr>"; 

} 

data += "</table>"; 

document. getElementBylI d("divl d").innerHTML = data; 


} 
yy 


</script> 

</head> 

<body> 

>i "put type="text" name="textfield" id="textfield"‏ البحث عن 
onKeyUp="getSuggest(event)">‏ 

<div id="divld"></div><div></div> 

</ body> 

</html> 


و اخيرا انتهينا الحمد لله من ملف الهوتميل بقي علينا ملف البي اتش بي ص٣‏ ط.عg00g[1‏ و هو 
بسيط جدا يعتمد على الدالة ۸ :10٥€‏ 
<?php‏ 
$handle = fopen("http:/ / www.google.com/ complete/ search?‏ 
hi=en&js=true&qu=" .$_GET["qu"], "r");‏ 
while (!feof($handle)) {‏ 


$text = fgets($handle); 
echo $text; 


} 
fclose( $handle);‏ 
<? 
الدالة 180۴ تعطي القيمة ۲11€ اذا وصلنا الى نهاية الملف اما الدالة 68©] فتساعدنا على قراءة 
البيانات و تخزينها في متغير نصي $× و اخيرا نقوم باغلاق الملف بالدالة 1٥1088‏ لتحرير الذاكرة 


و قد تتسائل اذا م نستخدم ملف واحد فقط بدلا من ملفين معنى طاذا م نتصل بغوغل مباشرة من 
ملف الهوتميل دون الحاجة لسكربت البي اتش بي و الجواب هو لتفادي رسائل التحذير المتكررة التي 
يظهرها امتصفح لدواعي امنية . 


الق كر اة 


طبعا نحن تعودنا ان يتم التحقق من النماذج بالجافا سكريبت مباشرة اي بالمتصفح دون الحاجة الى 
الرجوع الى السيرفر لكن ماذا لو اردت التحقق من كلمة مرور ؟ فهل ستضع كلمات المرور ضمن كود 
الجافا سكريبت و تقدمها على طبق من ذهب للهكر؟!!! طبعا لا الحل سهل جدا تقوم بانشاء فنكشن 
checkN ame‏ و تربطھها بالحدث 0۸K €0p‏ فاذا کتب الممستخدم اسم محجوز تظهر له 
رسالة عذرا فهذا الاسم محجوز: 


<html dir="rtl"> 
<head> 

<style type="text/css"> 
#tOp{ 

width: 150px; 
background-color: #OFF; 
color: #FOO; 

font-size: 18pX; 
font-weight: 900; 


</style> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 

{ 


ajax = new ActiveXObj ect("microsoft.xmlhttp"); 


1 
else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(divld,dataSourse) 

{ 

if(aj aX) 

{ 

ajax.open("get",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


document. getElementBylI d(divI d).innerHTML = ajax.responseText; 
1 
} 


ajax.send(null); 


// 

uuu E SG UU U EU 

function checkName(keyEvent) 

{ 

keyEvent = (keyEvent) ? keyEvent : window.event; 

input = (keyEvent) ? keyEvent.target : keyEvent.srcElement 
if(keyEvent. type == "keyup") 


if(input.value) 

{ 

getData("top","lIlogin.php?user_name=" +input.value); 

} 

else 

{ 

document. getElementBylI d("top").innerHTML = "<div></div>"; 
1 

1 


Muuuuus Gu UG U 
</script> 


<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<input type="text" name="user_name" id="user_ name" 
onKeyUp="checkName(event)"> 

<div id="top"></div> 

</ body> 

</html> 


لا شين جديد نتحقق من ان الممستخدم يكتب في الحقل ٠‏ 


if(input.value) 


getData("top", "login.php?user name="+input.value); 


1 


سنرسل ما یکتبه ف متغیر اسمه یوزر نیم لسکربت البي اتش ب صpطم.1۸ع٥!1‏ : 


<html dir="rtl"> 

<head> 

<meta http- equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<?php 

extract( $_ GET); 

if(Şuser_ name == "ayman" | | $user_ name == "zz" | | $user name 
== "امن کزة""‎ 

{ 

و 'عذرا فھذا لاسم محجوز'" r۲٣٤‏ 

} 

27< 

</ body> 

</html> 


كما ترى وضعنا 3 اسماء محظورة لكن بالعادة نستعلم من قواعد البيانات و الان لنجربها بامتصفح : 


` 3 Untitled Document - Mozilla Firefox 
Fils Edit View History Bookmarks Tools: Help 


+ CE 9 | ۴ HEEp:flacalhostflern'ajaxfphpflogin.html 7f 7 @l” ر‎ 


Î Mast visited ۳ Customize Links 8 Free Hotrnail ۳ Windows Marketplace 3 windows Media 8 Windonys 


FF 


+ | Î Ayman for p...| | Û Untitled Dae... | Î Untitled Doc... | Î Untitled Dar...) | Û Untill... E] Û] Untill) #7 


محترف لكن هناك ملاحظة ان هذا قد يؤدي الى ارهاق السيرفر 


الحصول على معلومات الهيدر 


نحن تعودنا على استخدام احد الطريقتين جيت او بوست مع الخاصية 0٥€1‏ : 
;(ajax.open("get",dataSourse‏ 


لكن ماذا لو اردنا الحصول على معلومات حول ذلك الملف و حول السيرفر و ليس طباعة محتويات 
املف مثلا نريد ان نعرف متى تم تعديل الملف ؟ ف هذه الحالة نستخدم الطريقة 1۳45 اي 


بهذه الطريقة : 
;(ajax.open("'HEAD",dataSourse‏ 


و با مثال يتضح المقال : 


<html> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 
else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(dataSourse,divld) 


{ 

if(aj aX) 

{ 

var ob = document. getElementBylI d(divl d); 
ajax.open(" HEAD",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


ob.innerHTML = ajax.getAllResponseHeaders(); 


} 
} 


ajax.send(null); 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman for php</title> 

</ head> 


<body> 

<input type="button" value="Click Me" 
onclick="getData('data.txt','centerDiv')" /> 
<b><big> 

<div id="centerDiv"></div> 

</ big></ b> 

</ body> 

</html> 


الفكرة الثانية الجديدة هنا هي اننا استخدمl‏ انلخlږصıة getAllResponse Headers‏ 
عوضا عن الخاصية ×16 98€ ۲۴85001۸ و السبب اننا لا نريد محتويات الملف النصي و انما ذريد 
الهيدر. 


و الان 3 ۰ ضها بامم: فح ٠‏ 


Û Ayman for php - Mozilla Firefox 
Fila Edit View History Bookmarks Tools Help 


3 a | ۳ http: flacalhostflernfajaxfheadfhae TF 2 


LÊ) Most Yisited ۳ Lustomize Links 3 Free Hotmail ۳ Windows Marketplace ۳ Windows Media 


۳ Ayman for php 1 E Untitled Document 

Click Me; 

Date: Sun, 24 Jan 2010 18:20:48 GMT Server: 
Apache/2.2.3 (Win32) PHP/5.1.6 Last-Modified: Sun, 


24 Jan 2010 18:18:13 GMT Etag: "12045-1b- 
13744e65'" Accept-Ranges: bytes Content-Length: 27 
Content-Type: text/plain 


رائع جدا هذه جمیع محتوبات الهيدر لکن ماذا لو اردت جزء معين من الهيدر متلا نريد استخلاص اخر 
تعدJı Last-Modified‏ و ge getResponse Header eدختui Iıج Jaw Jzdi‏ 
عù‏ tA]ResponseHeadersعع‏ اي انك لا ترید کل محتویات الھیدر : 


<html> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 


if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 
else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(dataSourse,divld) 

{ 

if(aj aX) 

{ 

var ob = document. getElementBylI d(divl d); 
ajax.open("HEAD",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


ر" کان بتاريخ × data.‏ اخر تعديل للJnف‏ " = ob.innerHTML‏ 
ob.innerHTML += ajax.getResponseHeader("Last-Modified'"");‏ 
} 

1 

ajax.send(null); 

ا 

eT 

</script> 


<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title> Ayman for php</title> 

</head> 

<body> 

<input type="button" value="Click Me" 
onclick="getData('data.txt', 'centerDiv')" /> 
<h3> 

<div dir="rtl" id="centerDiv"></div> 

</ N3> 

</ body> 

</html> 


کما تری مررنا لها قيمة 1گ ast-M] 0d1‏ وم تركها فارغة و الان لراها في المتصفح : 


Û Ayman for php - Mozilla Firefox 


Fils Edit Yiewm History Bookmarks Tools Help 
E 0 | ۳ http: fflocalhostilerrfajaxfheadfhead, html f 7 2 ر‎ 


[A Mast Visited ۴ Lustomize Links ۳ Free Hotmail ۳ Windows Marketplace 5 Windows Media ۴ Windonms 


E 


8 Untitled Document ۳ Ayman For php * 


اخر تعديل ملف )ں].a)ول‏ تان بتاریخ Sun, 24 Jan 2010 13:13:13 GMT‏ 


طبعا الهيدر التي جلبتها من السيرفر على صيغة نص ما رايك ان نحولها الى كائن تاريخ 04€ لي 
3 مكنك الماقارنة بین تاریخین متلا ۰ 


<html> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 
else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


function getData(dataSourse,divld) 

{ 

if(aj aX) 

{ 

var ob = document. getElementByl d(divl d); 
ajax.open("HEAD",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


var date = new Date(ajax.getResponseHeader("'"Last-Modified")); 
alert (" رقم الوم لير‎ : " + date.getDate()); 

alert (ii. :رقم الوم بلاسبوع من واحد ال‎ " + date.getDay()), 

date.getMonth( ) )‏ + " :رقم الشھر بالسنة من صفر الى احدی عثر '") ح٣۴‏ اج 
alert (" iıı : " + date.getFullYear());‏ 

alert (" ic.ı: " + date.getHours()); 

alert (" iaıı: " + date.getMinutes()); 

alert (" aiiı : " + date.getSeconds()); 

1 

J 


ajax.send(null); 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title> Ayman for php</title> 

</head> 

<body> 

<input type="button" value="Click Me" 
onclick="getData('data.txt', 'centerDiv')" /> 
<h3> 

<div dir="rtl" id="centerDiv"></ div> 

</ N3> 

</ body> 

</html> 


عرفنا متغیر جدید اسمیناه ثم عرفناه على انه کائن تاریخ 


(("var date = new Date(ajax.getResponseHeader("Last-Modified 


و طالمما لديك الكائن مكنك لاستفادة من جميع خواص هذا الكائن مثلا الخادة 118 50ع 


و سيقوم المتصفح بعرض © رسائل : 


i Fils Edt View History Bookmarks Tools Help 
ع ا۔‎ f | | | http:flocalhostflernfajaxfheadfhead.html TT <| lr ر‎ 


Mast Visited ۴ Customize Links ۴ Free Hotmail 3 Windows Marketplace 5 Windows Media 8 Winans 


ا 


|] Ayman For php | Û Ayman For php 


۰ 


The page alt http:flocalhost says: 


رقم اليوم بالشهر : 24 ١‏ 


"Î Ayman for php - Mozilla Firefox @ د‎ 
i Fils Edit Yiewy History Bookmarks Tools Help 


: ¥ 0 o ۴ http :fflocalhostflernfajaxheadfhead. html TF 7 2 ر‎ 


Mast Visited 3 Lustomize Links 3 Free Hotmail 5 Windows Marketplace ۴ Windows Media ۴ Windonmys 


E 


E Ayman Far php ۴ Ayman for php 


۰ 


The page at hittp:f#flacalhast says: 


رقم اليو بالاسبوع قن واخذ الى ستة؛ لا k‏ 


التحقق من رابط 


قبل ان نحمل ملف هكننا ان نتحقق من صحة الرابط و يكون ذلك بوضع شرط اذا اكنت الخاصية 
8اك تساوي 200 فهذا يعني ان كل شين تام و الرابط صحيح اما اذا اكنت S418‏ 
تحمل القيمة 404 فذلك يعنى ان الرابط خطاً : 


<html> 

<head> 

<script type="text/j avascript"> 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 
else if(window.XMLHttpRequest) 


1 
ajax = new XMLHttpRequest(); 


function getData(dataSourse,divld) 

{ 

if(aj aX) 

{ 

var ob = document. getElementBylI d(divl d); 
ajax.open("HEAD",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 ) 


{ 
if(ajax.status == 200) 


ob.innerHTML = "z..a طljl‎ "; 
else if (ajax.status == 404) 


و" عذرا الملف غير موجود او yljllط ob.innerHTML = " jli‏ 
} 
} 


ajax.send(null); 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Ayman for php</title> 

</head> 

<body> 

<form> 

<input type=" button" onClick="getData('data.txt')" 
value="data.txt" > 

<input type=" button" onClick="getData( 'tttttt.txt')" 
value="tttttttt.txt" > 

</form> 

<h3> 

<div dir="rtl" id="centerDiv"></div> 

</ N3> 

</ bodQdyY> 

</html> 


فهذا الكود مفيدة جدا فعند فحصك للملف 448.٤‏ ستظهر لك رسالة بالمتصفح : 


TJ Ayman for php - Mozilla Firefox OES 1 
J Fil Edit Yiewy History Bookmarks Tools Help 


> Ê A | 8 http :fflocalhostflernfajaxfhead}head, f 7 A)” 2 


AN Mast Visited ۴ Lusktomize Links ۳ Free Hotmail ۳ Windows Marketplace ۴ Windoms Media 8 Windows 


اما اذا حاولت التحقق من الملف ح2 ٤€).‏ طبعا هذا الملف غير موجود : 


, Û Ayman for php - Mozilla Firefox 
J File Edit Yim History Bookmarks Tools Help 


3G fî | | Û | httpifflocalhostflernfajax(headjhead. TT <” lr ر‎ 


[Û] Most Visited 8 Lusktomize Links 8 Free Hotmail ۳ Windows Marketplace ۴ Windows Media 8 Windows 


7 


عذرا الملف غير موجود او الرابط غلط 


XMLHttp Request jûl ùم اکر‎ 


ماذا لو كان لديك عدة ازرار و قام المستخدم بالضغط عليها واحد تلو الاخر و سرعة جدا فكثر من 
المستخدمين يفعلون ذلك , طبعا هذا سيؤدي الى تشويش السكربت و ارباكه لان اممستخدم برسل طلب 
جديد قبل ان تكتمل لاستجابة للطلب القديم !! 


و ياتي الحل هنا بانشاء كائنات متعددة )1€ ۸€ X116‏ بنفس الطرق السابقة : 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Untitled Document</title> 

</head> 

<script type="text/j avascript"> 

var ajax1 = false; 

var ajax2 = false; 

if(window .ActiveXObj ect) 

{ 

ajax1 = new ActiveXOhbj ect(" Microsoft.XMLHTTP"); 
ajax2 = new ActiveXOkbj ect(" Microsoft.XMLHTTP"); 


} 
else if(window.XMLHttpRequest) 


{ 
ajax1 = new XMLHttpRequest(); 
ajax2 = new XMLHttpRequest(); 


} 


function getData1(dataSourse) 


{ 
if(ajax1) 
{ 


ajax1.open(" GET",dataSourse); 
ajax1.onreadystatechange = function( ) 

{ 

if(ajax1.readyState == 4 && ajax1.status == 200) 
{ 

document.getElementBylI d("div1").innerHTML = 
ajax1.responseText; 


} 


ajax1.send(null); 


// 


[IR E E E E E E E E O E E E 2E E E 
function getData2(dataSourse) 


{ 
If) aj aھ×>2(‎ 
{ 


ajax2.open(" GET",dataSourse); 
ajax2.onreadystatechange = function( ) 


{ 

if(ajax2.readyState == 4 && ajax2.status == 200) 
{ 

document.getElementBylI d("div1").innerHTML = 
ajax2.responseText; 

ajax2.send(null); 


\/ISEIEEETEEEEEE E EF E 


</script> 
<body> 


<p>a&“anbsp; </p> 

<p> 

<form> 

<input type="button" onClick="getData1('file1.txt')'"" value=" iıı 
"'الاول‎ < 

<input type="button" onClick="getData2('file2.txt')'" value=" iıı 
"الثاني‎ < 

</ forM> 

</ p> 

<div dir="Itr" style="font- size: 24px; " id="div1"></div> 

</ body> 

</html> 


كما لاحظت عرفنا متغيرين 1×هإه و 2ه و عرفا ايضا دالتبن 1 2024ع و الدالة 
2ح اع فهذا مفيد لتفادي ارباك السكربت و هذه هى النتيجة في المتصفح 


J Untitled Document - Mozilla Firefox 
Fils Edit View History Bookmarks Tools Help 


r E 0 ۳ http: fflocalhostflernfajaxfZobf ajax, hl I A= ر‎ 


SÎ Most visited 8 Lustomize Links 3 Free Hotmail ۳ Windows Marketplace ا‎ Windows Media ا‎ Windows 


27 


۳ Untitled Document x 5 Untitled Document 


This text 1s from flel .txt 


J Untitled Document - Mozilla Firefox 
Eild Edit View History Bookmarks Tools Help 


+ 0 9 ( 8 http: fflocalhastflernfajaxfaob ajax, ht kK r Al” ر‎ 


lA] Most visited ۳ Lustomize Links 3 Free Hotmail ۳ Windows Marketplace F۳ Windows Media ۳ Windoms 


Es 


3 Untitled Document 1 4 Untitled Document 


j But 
Tlus text 12 from file2.txt 
Is that clear OK sood 


رائع جدا لكن الكود السابق يسمح لك بانشاء کائنين فقط XMLLHttpR e٩" U €S†‏ , و ماذا لو 
ضغط المستخدم على نفس الزر عدة مرات و بسرعة في كل مرة سيطلب طلب جديد من السيرفر قبل 
ان يكتمل تحميل الطلب القديم و يكون الحل هنا بانشاء فنكشن داخلية. 


inner fUu1Ct101 ةzيلخادلا الفنكشن‎ 


و هى دالة عادية نحن نعرفها داخل دالة اخرى و نسميها كما نريد : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/j avascript"> 

function outer(data) 

{ 

var num1 = data; 

/I/+++++++++++++++++++++++++ 

function inner(num2) 


alert(num1+num2); 

} 
/Il+++++++++++++++++++++++++ 
inner(5); 

} 

</script> 

</head> 

<body onLoad="outer( 10)" > 

</ bodQdyY> 

</ htmlI> 


Untitled Document - Mozilla Firefox 
Fil Edt View History Bookmarks Tools Help 


IC XK A | | | http:fflacalhastflernfajaxfaobjfun.htr TT < r 


E] Most visited ۳ Lustomize Links ۴ Free Hotmail ۴ Windows Marketplace 5 Windows Media 4 Win doms 


E 


The page at http:#/lacalhost says: 


1 Transferring data Fram localhost... SESS 


طبعا الفنكشن الداخلية لديها الصلاحيات لكي تصل الى المعامل الذي مررناه للدالة الخارجية . 


هل تعلم انك في كل مرة تستدعي الفنكشن 011€6١‏ تصنع نسخة جديدة من هذه الفنكشن 
t€‏ و بالتالي يتم انشاء قيمة جديدة من الممتغير 1 1111١‏ الذي ستتعامل معه الفنكشن الداخلية 
€١‏ بدورها و نفس الشين بالنسبة للفنكشن £60414 حيث سيتم انشاء نسخة جديدة منها 
تحوي کائن جديد M1 ††p ۸€" €S†‏ ضغ کل مرة يتم استدعائها و ستكون الفنكشن 
الداخلية او التي كنا نسميها المجهولة لانها بدون اسم ستكون قادرة على الوصول الى هذا الكائن الجديد 


<html dir="rtl"> 

<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>Untitled Document</title> 


</head> 

<script type="text/j avascript"> 

IT OC OS EGS OT 
function getData( dataSourse) 

{ 


var ajax = false; 

if(window .ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect(" Microsoft.XMLHTTP"); 
} 

else if(window.XMLHttpRequest) 
{ 

ajax = new XMLHttpRequest(); 

} 

if(aj aX) 

{ 

ajax.open("GET",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


document. getElementBylI d("div1").innerHTML = ajax.responseText; 
delete ajax; 

ajax = null; 

1 

1 


ajax.send(null); 


</script> 

<body> 

<p>a&“nbsp; </p> 

<p> 

<form> 

<input type="button" onClick="getData('file1.txt')" value=" ںوٺı‎ فkı'">‎ 
<input type="button" onClick="getData('file2.txt')" value=" idi "الف‎ < 
</form> 

</p> 

<div dir="Itr" style="font- size: 24px; " id="div1"></div> 

</ body> 

</html> 


الجديد بالكود السابق اننا عرفiا‏ الکlئj etData jiكiفلll Jèls XMLHttþ R€qUES‏ 
جدید ر بق اننا عر ئن 

و ليس خارجها و ذلك لكي يتم انشاء نسخة جديدة من الفنكشن £044 في كل مرة يتم 

استدعائها و بالتالي نقدم للفنكشن الداخلية كائنSع‏ ۸۴1 X111)‏ جديد يعني باختصار 

انت بذلك تع خUeS KML Http Req‏ جدید لکل طلبیة 


و لا مانع ان تحرر الذاكرة من الكائن كخطوة احترافية : 


delete ajax; 
ajax = null; 


طبعا لن تتغير النتيجة الفرق الوحيد هو انك تخصص كائن جديد لكل طلب من السيرفر : 


2 Untitled Document - Windows Internet Explorer EE 


Gı 3 ¥  # | http:flacalhastflernfajaxfaobj: ™ | #K [Live searh | ج الل‎ 


File Edt Yiew Favorites Tools Help 


| 2 : 3 - FF 
r 7 | € untitled Document 8| | im ” H2 Page <” IGF Tonls 


Ez 
This text 1s from filel.txt 


LE Û Internet F100 7 


EE 
OO. Breeereenaetzend (4 [x] lesan Jaf 


Fila Edit Yiey Favorites Tools Help 


| Fh 7 2 د‎ 
E ¥ E untitled Document i ` E 7” 2 Page r” CF Tools r” 


But 
Thıs text 1s from file2.txt 
Is that clear????? OK good 


Internet FE 100 * 
l3 @ 1 


FramewWOrKkS zlرll‎ Jصفلl‎ 


نحن تعودنا ان نبني سكربت الاجاكس من تحت الصفر و لكن هناك طريقة توفر عليك الكثير من 
الوقت و الجهد و هي ان تستخدم اجاکس ۴۲۵1۱۴۷0۲٤۸8‏ و هي عبارة عن ملفات جافا 
سكريبت تحوي مكتبات جاهزة من الدوال فقط قم بتضمين ملفات الجافا سكريبت ضمن برنامجك ثم 
قم باستدعاء الفنكشن التي تريد 


HTML كmınliı‎ 


لا بد و انك سمعت سمعت عن |11[ و هو تغيير عناص في صفحة الويب بدون اي تحديث 
للصفحة الان اريد ان تفكر و تحاول ان تجد طريقة لعرض صورة متغيرة اي تتغير هذه الصورة بدون 
اعادة تحميل الصفحة هذا سهل جدا باستخدام تقنية الاجاكس و خاصة انك مبرمج اجاكس محترف لن 


حسنا لا بد من استخدام الكائن خ8 € 41ء۸ )11ا XM]‏ و لكن هذا الكائن يسمح لنا بجلب 
نص او اكس ام ال و لا يسمح لنا بسحب صور من السيرفر و الحل ببساطة ان نخزن رابط الصورة 
على ملف نصي ثم نحمل هذا النص و نضعه في عنصر 11€ فيقوم المتصفح بتحميل الصورة . اريد 
ان تحاول ان تصنع السكربت بنفسك فبل ان تقراً الكود : 


<html dir="rtl"> 


<head> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf- 8" /> 
<title>DHTML</title> 

</head> 

<script type="text/j avascript"> 

// 

function getData(dataSourse) 

{ 


var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


} 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

1 

if(aj aX) 

{ 

ajax.open("GET",dataSourse); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 


var src = ajax.responseText 

document.getElementBylIl d("div1").innerHTML = "<img src 
='"+src+"' width=200>" ; 

delete aj ax; 

ajax = null; 

} 

} 


ajax.send(null); 


</script> 

<body> 

<table width="400" border="0" align="center" cellpadding="3" 
cellspacing="3"> 

<İr> 

<td width="195" align="center"><h3 
onMouseOver="getData (' file 2.txt')'">ءlı”Jl‎ iin </ N3> </td> 
<td width="178" align="center"><h3 
onMouseOver="getData ("file 1.اXt')'""‎ >izطلl />منتدی صږر‎ N 3< > / 1d < 
</tr> 

<tr align="center"> 

<td height="179" colspan="2"><div id="div1" ></div></td> 


</tr> 

</table> 
</ body> 
</ htmlI> 


شرط ان تضع مجلد الصور و الملفات النصية و ملف الهوتميل بنفس المجلد : 


3 Fil Edit View Favorites Tools Help 


O sax © PF گر‎ Search Ey Folders ER i Folder Sync 


Address 
ا‎ ajax File1 
File and Folder Tasks Firefox Dacurnent Text Dacurment 


2 KE | 1 KE 
ÛÎ make a new folder 
€ Publish this folder to the file2 Fun 

Web Text Document Firefox Document 
kl Share this Folder 1 EB ã KE 


= images 
Other Places 


×دزذ ےا 


5ُ My Documents 
lğ Shared Documents 
3 My Lompukter 

2 My Network Plazes 


Details 


عند مرور الماوس فوق جملة منتدى الكيمياء تظهر صورة مناسبة 


} DHTML - Mozilla Firefox 0 
Eil Edit View History Bookmarks Tools Help 


"CFC X @ (Û | htpitecahostflermjajax/2obfun.htr Tr ” | lr web sear 


Û] Most visited ۳ Lustomize Links 3 Free Hotmail 3 Windows Marketplace ۳ Windows Media ۴ Winds 


# 


منتدى صور الطبيعة 


J DHIML - Mozilla Firefox 
Fila Edit View History Eockmarks Tools Help 


+ 0 5.4 0 ا‎ ۳ | http:fflocalhastflernajax2objfun.htr TI . E eb sear || 


Most Wisikted 8 Lustomize Links ۴ Free Hotmail 5 Windows Marketplace ۳ windows Media ۳ Wirdonys 


E 


صنند ی الگیماء منندی تسوار الطببعة 


و لاتنسى ان تكتب الرابط الصحيح ف الملف النصي: 


[Û file1 - Notepad EE 


images/pl. jpg 


Ajax FramewOoFrkKS Jol lı 


کما اسلفنا استخدام 70۲٤8‏ ع۴۲۵11 ×ه ل4 يوفر عليك الكثير من الوقت و الجهد و ما هي الا 
ملفات جافا سکریبت نقوم بتضمینها بصفحتنا فلنبدا ببناء ملف جافا سکریبت سنحفظه بلامتداد 8ز : 


// JavaScript Document 
function getText(url,callback) 
{ 

var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

1 

if (ajax) 

{ 

ajax.open("get",url); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 


callback(ajax.responseText); 
delete aj ax; 

ajax = null; 

1 

} 

ajax.send(null); 

} 

} 


احفظه باسم 8 .43113۸ و لیس بلامتداد ۸٤7٩1.‏ الجدید عليك هو اننا مررنا للفنکشن 
get" ext‏ امعامل البارامیتر الاول 18۴1 و ثم الباراميتر الثاني 4٤C‏ ط]1هc:‏ 


function getText(url,callback) 


قد تتسائل ماذا تعني 811034٥٣‏ ؟ نقصد بها اسم الفنكشن التي ستقوم معالجة النص القادم من 
السيرفر طبعا تعريف هذه الفنكشن سيكون ملف الاتش تي ام ال : 


callback(aj ax.responseText); 


و الان لننتقل الى ملف 1111 .tعg:‏ 


<html> 

<head> 

<style type="text/css"> 

#divID 

{ 

background-color: #900; 

font-size: 24px; 

color: #FFO; 

width: 300px; 

overflow :auto; 

1 

</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/ javascript" src="ayman.js"></ script> 
<script type="text/ javascript" > 

function message(text) 

{ 

document.getElementByl d("divlI d").innerHTML = text; 


function show (str) 

{ 

document.getElementBylI d("divl d").innerHTML = str; 
} 

</ script> 

</head> 

<body> 

<form> 

<input type=" button" value=" ji all)" 
onClick="getText('file1.txt',message)'"> 
<input type=" button" value=" J| g4 "تاريخ اماي اس‎ 
onClick="getText('file2.txt',show)'"'> 


</form><br> 

<div id="divl d" align="center"> </ div> 
</ body> 

</html> 


اولا قمنا بتضمين ملف الجافا سكريبت ضمن عندر ځ٥C11°S‏ 
و لكن اباك ان ترف الفنكين داخل هذا السظطر : 


<script type="text/ javascript" src="a¥ an .jئs"‎ >l İi اقصد لا تضع‎ 
</ script> 


و عندما ترید ان تعرف الفنکشن افتح عنصر ځ 8٥۲1P‏ جدید ھکذا : 


<script type="text/ javascript" > 
function message(text) 


{ 

document.getElementByl d("divlI d").innerHTML = text; 
} 

| [| === === 

function show (str) 

{ 

document.getElementBylI d("divl d").innerHTML = str; 
} 


ثم انشأنا فورم و ازرار و لاحظ ان کل زر يستدعي نفس الفنکشن g6٤ 16۶*٤‏ ثم پرر لها فنکشز 
مختلفة مثلا W‏ 8510 او 116884€6 و لا حظ ايضا ان الملفات النصية و الجميع بنفس المجلد : 


Fils Edit Yiew Favorites Tools Help 


O sax ` € 3 a earch Ij Folders ER ك‎ Folder Sync 


Î Address 


LENS arman 


File and Folder Tasks ھ‎ ۴: 15cript Script File 


ye | 1E 


2 Make a new Folder 


4 Publish this Folder to the Fila1 2 get 
Web Text Document Firefox Document 


E share this folder 1 EB 1 KE 


File 
TexkE Document 
Other Places | 1FE 


×aزھ‏ ا 

E My Documents 
lÊ Shared Dacuments 
E My Computer 

€ My Network Places 


Details 


ملاحظة اخيرة احيانا الدريم ويفر يضيف تلقائيا <61 18> مع الفورم قم بحذفه فانت لا تحتاج الى 
عنصر <1ع€طھ]1>. 


و الان لنجربه باطمتصفح : 


& Untitled Document - Windows Internet Explorer 


N aN 7T (FB | http:Hlacalhastflernfajax}Fram ™ ا‎ [Live searh_ | ج لر‎ 


Fila Edit Yiey Favorites Tools Help 


١ ۳ و‎ : 2 3 
و‎ dr united Document 3 | Em 7” zr Page vr CF Tools ” 


SEFF 


Lal € Internet F100 7‏ 
ما .ا طت عن الزر الان 


/& Untitled Document - Windows Internet Explorer - 8K 


چ سے 


N ad ” #@ | http:flocalhostflernfajax}Fram ™ + [Live search | ج ار‎ 


Fil Edit View Favorites Tools Help 


1 1 a 2 - 1 n ¥ 
TF a | @uneted Document ا3“‎ e 7” 3 Page 7” iF Tools <” 


په 


Internet Fl 100 
l1 @ 1 


get Xml 


الان سنقوم بجلب محتوبات ملف ی اتش ي يحوي بیانات اکس ام ال اولا اكتب هذا الكود و احفظه 
ڊewl script1.phP‏ : 


<?php 

header("Content-type: text/xml"); 

print "<?xml version='1.0' encoding='utf-8' ?>"; 
print "<alloptions>"; 

$arr = array("red","green","blue","black"); 
for($i=0; $i<count($arr); $i++) 

{ 

print "<option>". $arr[ $i]."</option>"; 

1 

print "</alloptions>"; 

?< 


و لدینا ملف اخر احفظه باسم 8٥۲152.‏ و هذا هو الکود : 


<?php 

header("Content-type: text/xml"); 

print "<?xml version='1.0' encoding='utf-8' ?>"; 
print "<alloptions>"; 

$arr = array("yellow","pink"); 

for($i=0; $i<count($arr); $i++) 

{ 


print "<option>". $arr[ $i]."</option>"; 
} 

print "</alloptions>"; 

ح 


و الان لننتقل الى ملف الجافا سكريبت المموجود مسبقا لديك باسم S‏ .4/1141 فقط نريد ان 
نضيف دالة جديدة 1١1‏ € فيصبح الملف 4/1١121.‏ هكذا : 


// JavaScript Document 

ISE KEEL CME dE EL LE 

function getText(url, callback) 

{ 

var ajax = false; 

if(window.ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect("Microsoft.XMLHTTP"); 


1 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

ا 

if (ajax) 

{ 

ajax.open("get",url); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


callback(aj ax.responseText); 
delete aj ax; 

ajax = null; 

} 

} 

ajax.send(null); 


} 


A o pe E O E 


// getXml 
/I/+++++++++++++++++++++++++++++++++++ +++ +++ + 
function getXml(url,callback) 

{ 

var ajax = false; 

if(window .ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect(" Microsoft.XMLHTTP"); 
} 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

} 


if (ajax) 


ajax.open("get",url); 
ajax.onreadystatechange = function( ) 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


xmlIlDocument = ajax.responseXML; 
callback(xmlIlDocument) ; 

} 

} 

ajax.send(null); 

} 


} 
/I++++++++++++++++++++++ +++ +++ ++ +++ +++ +++ +++ 


الفرق الوحيد هو اننا استخدمنا ajax .responS€XML‏ بدلا من 
الخاصيةأ×€ 98€ ۲۴550۸ لاننا نتعامل مع بيانات اكس ام ال و الان بقي علينا ملف الهوتميل 
get_xml.html‏ : 


<html> 

<head> 

<script type="text/javascript" src="ayman.js"> </script> 
<script type="text/javascript" > 


function makeOptions(xml) 

{ 

var optionsArr = xmlI.getElementsByTagName("option"); 
var selectControl = document.getElementByl d("selectl d"); 
selectControl.options.length = O0; 

for(i=0;i1< optionsArr.length;i+ +) 


selectControl.options[i] = new 
Option(optionsArr[i].firstChild.data); 


O LD N DS 

function setColor() 

{ 

var optionsArr = xmlDocument.getElementsByTagName("option"); 
index = document.getElementBylI d("selectl d").selectedl ndex; 
document.getElementBylI d("div1").style.color = 


optionsArr[index].firstChild.data; 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title> Ayman for programming</title> 

</head> 

<body> 

<form> 

<select id="selectl d" onChange="setColor()"> 

<option> choos</ option> 

</select> 

<input type=" button" 
onClick="getXml('script1.php',makeOptions)" value=" Jڍالı "مجموعة الالوان‎ < 
<input type=" button" 
onClick="getXml('script2.php',makeOptions)" value=" ijl ةدومnجا'"‎ > 
</form> 

<br> 

<div id="div1"> 

<h1>lI love Ajax </h1> 

</ div> 

</ body> 

</html> 


حيث تقوم الفنكشن 1018 112K€0‏ معالجة بيانات الاكس ام ال و تحويلها الى نصوص عادية 
عن طريق الخاصية 4 1114.44 11۲5٣)‏ و ثم نقوم بعرضها كقانمة اختيارات : 


selectControl.options[i] = new Option(optionsArr[i].firstChild.data); 


و لدينا ايضا الفنكشن 86٣0010۲‏ التي مهمتها تغيير لون النص حسب ما يرغب الممستخدم و ذلك 
باستخدام الخاصيتين S16. ٥010٣‏ بعد معرفة رقم الاندكس للعنصر الذي تم اختياره: 


document. getElementBylI d("div1").style.color = 
optionsArr[index ].firstChild.data; 


اما هذا السطر فنقوم بحذف محتويات القانمة لتعبئتها بعناصر جديدة: 


;selectControl.options.length = 0 


و اخيرا انشآنا زرين ليكون للمستخدم الخيار بانتقاء مجموعة الالوان المناسبة : 


<input type="button" onClick="getXml('script1.php',makeOptions)" 
"مجموعة الالوان الاول "=عں ا۷2‎ < 
<input type="button" onClick="getXml('script2.php',makeOptions)" 
۷8۵10 €=" "ا مجموعة الثاذة‎ < 
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Fila Edit View Favorites Tools Help 
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نجح البرنامج بفضل الله تعالى و بامكانك تغيير لون النص . 


postText 


الان سنضم فنكشن جديدة الى مكتبتنا الذهبية و هي الفنكشن ا×€ 00511 طبعا لن نفتح ملف 
جديد و انما سنكتب ملفنا السابق 8[ّ .871141۸ الكود التالي: 


// postlext 

function postText(url,data,callback) 
{ 

var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


1 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

1 

if (ajax) 

{ 

aj ax.open("POST",url); 
ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 


callback(aj ax.responseText); 
delete aj ax; 


ajax = null; 

} 

} 
ajax.send(data); 
1 

} 

/1/ 


طبعا استخدمنا الخاصية اوبن لفتح املف و مررنا لها القيمة يوست بلا من جيٽت . 
ajax.open("POST",url);‏ 


ثم وضعنا قيمة للهيدر طبعا لا داعي ان نضع الهيدر مع جيت ٠‏ 


ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 


و اخيرا مررنا قيمة داتا للخاصية سيند عوضا عن نال التى مررها عند استخدامنا جيت ٠‏ 
ajax.send(data);‏ 


و الان الى ملف البي اتش بي ۲11٤.1‏ بسیط جدا : 


<?php 
print "<hZ2Z> Welcome ".$_POST[user_ name]."</hN2>"; 
?>< 


بقي علينا ملف الهوتميل 005.11١1‏ الذي سيحوي دالة مهمتها عرض النص القادم من السيرفر : 


<html dir="rtl"> 

<head> 

<script type="text/j avascript" src="ayman.js"></script> 
<script type="text/j avascript"> 

function hi(text) 

{ 

document.getElementByl d("div1").innerHTML = text; 
} 

</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

</ head> 

<body> 

<form> 

<input type="buttO0¬" Va|U€=" تر‎ ةllwر"‎ 
onClick="postText('print.php','user name=Ayman',hi)" > 
</form> 

<br> 

<div id="div1"></div> 

</ body> 

</html> 


کما تری الفنکشن p08 1٤۴×t‏ رر لھا ثلاث بارامیترات : 


عنوان الملف 
البيانات التي نريد ارسالها للسيرفر داتا 
اسم الدالة التي ستعالج النص القادم من السيرفر 


postText('print.php','user_name=Ayman', hi) 
٠: و الان لنجرب باطمتصفح‎ 
1 & Untitled Document - Windows Internet Explorer EES 


ëGı i” #@ | http: lacalhastlernfajaxf}Fram ا‎ [Live searh | ج لل‎ 


Fila Edit View Favorites Tools Help 


E” 
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Welcome Ayman 
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postXml 


سنضيف بعون الله الفنكشن 051١1‏ الى مكتبتنا الذهبية التي ترسل معلومة الى السيرفر مغلا 
رقم مجموعة الالوان ثم تستقبل بيانات اكس ام ال و توكل مهمة معالجة هذه البيانات و عرضها على 
شكل قانمة اختيارات الى الفنكشن :Iinak€O0p†1018‏ 


Mss uu uu O GC U U U U U 
function postXml(url,data, callback) 


{ 
var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 
} 


else if(window.XMLHttpRequest) 


{ 
ajax = new XMLHttpRequest(); 


1 

if(aj aX) 

{ 

ajax.open("post",url); 
ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 

ajax.onreadystatechange = function() 


{ 
if(ajax.readyState == 4 && ajax.status == 200) 
{ 


xmlIlDocument = ajax.responseXML; 
callback(xmlDocument) ; 


} 


ajax.send(data); 


} 


A e e A E Û E U U U U U 


طبعا الكود السابق ليس ملف مستقل و انا اضفه الى ملف الجافا سكريبت A71١۱2 1.[8S‏ 
اول فرق بين هذا الكود و سابقه اننا استخدمنا الخاصية ا ۲€8D0۸۱98€۸M‏ لاننا نستقبل بیانات 


xmlDocument = ajax.responseXML; 
callback(xmIlDocument); 


لننتقل الى ملف البي اتش بي :C010۲8. 1p‏ 


<?php 
extract($_ POST); 
if($group == 1) 
{ 


$arr = array("yellow","pink"); 

else if($group == 2) 

{ 

$arr = array("red","green","blue","black"); 
header("Content-type: text/xml"); 

print "<?xml version='1.0' encoding='utf-8' ?>"; 
print "<allOptions>"; 

for($i=0; $i< count($arr); $i++) 


print "<option>". $arr[ $i]."</option>"; 


print "</allOptions>"; 
?< 


وها فرط 5 ان ر خرو ححفل اة واع هفات نن :وة لوان الول ٠‏ 


$arr = array("yellow","pink"); 


اما اذا كان المتغير جروب يحمل القيمة اثنين سنخزن بالمصفوفة اربع الوان : 


$arr = array("red","green","blue","black"); 


م یتبق علینا الا ملف الھوتمیل 1اط .]اہإ×_ostم‏ : 


<html> 

<head> 

<script type="text/j avascript" src="ayman.js"></script> 
<script type="text/j avascript"> 

function makeOptions(xml) 

{ 

var optionsArr = xml.getElementsByTagName("option"); 
var i; 

var selectControl = document.getElementByl d("selectl d"); 
selectControl.options.length = 0; 

for(i=0;i1< optionsArr.length;i+ +) 

{ 

selectControl.options[i] = new 
Option(optionsArr[i].firstChild.data); 

} 


E E O E E o o e E o 
function setOption( ) 


{ 

var optionsArr = xmlDocument.getElementsByTagName("option"); 
var index = document.getElementByl d("selectl d").selectedl ndex; 
document.getElementBylI d("div1").style.color = 
optionsArr[index].firstChild.data; 


Mu E 


</script> 

<meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> 
<title>Untitled Document</title> 

</head> 

<body> 

<form> 

<select id="selectl d" onChange="setOption()"> 

<option>Choos one</option> 

</select> 

<input type=" button" value=" "مجموعة الالوان الاوز‎ 
onClick="postXml('colors.php','group=1', makeOptions)"/ > 
<input type=" button" Val ue="' "مجموعة الالوان لاز‎ 
onClick="postXml('colors.php','group=2', makeOptions)"/ > 
</form> <br> 

<div id="div1"> 

<h1>Ayman for programming</hN1> 

</ div> 

</ body> 

</html> 


اولا عرفنا الدالة التي مهمتها معالجة البيانات القادمة من السيرفر : 


function makeOptions(xml!) 


{ 


var optionsArr = xml.getElementsByTagName("option"); 


} 


ثم تقوم هذه الدالة بحذڏف جمیع عناصر القامة: 
selectControl.options.length = 0;‏ 
ثم تقوم ببناء قاثمة جديدة حسب ما اختار اممستخدم : 


for(i=0;i< optionsArr.length; i++) 
{ 
selectControl.options[i] = new Option(optionsArr[i].firstChild.data);; 


} 


اخيرا لدينا الفنكشن 8605101۸ التي مهمتها تغغير اللون حسب رغبة اممستخدم باستخادم 
الخاصيتين Sy1€.°C0101‏ : 


function setOption() 

{ 

var optionsArr = xmlDocument.getElementsByTagName("option"); 
var index = document. getElementByl! d("selectl d").selectedl ndex; 
document. getElementBylI d("div1").style.color = 

optionsArr[index ].firstChild.data; 

1 


و طبعا انشآنا زرين لكي نسمح للمستخدم بانتقاء مجموعة الالوان المناسبة : 


<input type="buttO0¬" Val Uu€=" "مجموعة الالوان الاول‎ 
onClick="postXml('colors.php','group=1', makeOptions)"/> 
<input type="buttO0¬" VAI U€=" ةنlلi "مجموعة الالوان‎ 
onClick="postXml('colors.php','group=2', makeOptions)"/ > 


و اخيرا اريد ان اضع لك الملف الذهبی W0۲٣‏ ع۴۲۸1۱ الذي اسميناه 8 .4/1131 ساضعه لك 
کاملا لک م لبيقاتك فقط قم بتضم املف دون الحاجة أن تعد کتارة تلك الدوال كل 


ف 


// JavaScript Document 

IM E Cl E o oh Kh Uk E o o o ol o 

function getText(url, callback) 

{ 

var ajax = false; 

if(window.ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect("Microsoft.XMLHTTP"); 


} 

else if(window.XMLHttpRequest) 

ajax = new XMLHttpRequest(); 

1 

if (ajax) 

{ 

ajax.open("get",url); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


callback(ajax.responseText); 
delete aj ax; 

ajax = null; 

1 

ا 

ajax.send(null); 


} 


OE E E E E E 


// getXml 
//++++++++++++++++++++++++++++++++++++ +++ +++ 
function getXml(url, callback) 

{ 

var ajax = false; 

if(window.ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect("Microsoft.XMLHTTP"); 


} 

else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

if (ajax) 

{ 

ajax.open("get",url); 
ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 
{ 


xmlDocument = ajax.responseXML; 
callback(xmIlDocument); 

} 

} 


ajax.send(null); 


// postText 

function postText(url, data, callback) 
{ 

var ajax = false; 
if(window.ActiveXObj ect) 


{ 
ajax = new ActiveXObj ect("Microsoft. XMLHTTP"); 


else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

} 

if (ajax) 

ajax.open("POST",url); 
ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 

ajax.onreadystatechange = function() 


if(ajax.readyState == 4 && ajax.status == 200) 


callback(aj ax.responseText); 
delete aj ax; 

ajax = null; 

} 

} 


ajax.send(data); 


//postXml 

MSE CE E E o 

function postXml(url,data, callback) 

{ 

var ajax = false; 

if(window.ActiveXObj ect) 

{ 

ajax = new ActiveXObj ect("Microsoft.XMLHTTP"); 
} 


else if(window.XMLHttpRequest) 

{ 

ajax = new XMLHttpRequest(); 

ا 

if(aj aX) 

ajax.open("post",url); 
ajax.setRequestHeader('Content-Type','application/ x-www-form- 
urlencoded'); 

ajax.onreadystatechange = function() 

{ 

if(ajax.readyState == 4 && ajax.status == 200) 
{ 


xmlDocument = ajax.responseXML; 
callback(xmIlDocument); 


} 


ajax.send(data); 


} 


EE E E E E o E E o E 


